注:基于Three.jsv0.155.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js</title>
</head>
<body>
</body>
<!-- 具体路径配置,你根据自己文件目录设置,我的是课件中源码形式 -->
<script type="importmap">
{
"imports": {
"three": "./js/three.module.js",
"three/addons/": "../three.js/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const width = 800
const height = 500
// 场景
const scene = new THREE.Scene();
// ********** 本章知识点示例代码 Start **********
// 1. 创建纹理贴图
// 几何体
const geometry = new THREE.SphereGeometry(100);
// const geometry = new THREE.BoxGeometry(100, 100 ,100);
// 文理贴图
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./img/6.JPG');
// 材质
const material = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture,
});
material.map = texture;
const mesh1 = new THREE.Mesh(geometry, material);
scene.add(mesh1);
// 2. 自定义顶点UV坐标
scene.remove(mesh1);
const geometry2 = new THREE.PlaneGeometry(200, 100);
console.log(' ~ file: 5顶点UV坐标、纹理贴图.html:29 ~ geometry.attributes.uv:', geometry.attributes.uv);
console.log(' ~ file: 5顶点UV坐标、纹理贴图.html:29 ~ geometry.attributes.position:', geometry.attributes.position);
const textureLoader2 = new THREE.TextureLoader();
const texture2 = textureLoader2.load('./img/6.JPG');
geometry2.attributes.uv = new THREE.Float32BufferAttribute([
0, 1,
1, 1,
0, 0,
1, 0,
], 2);
// 材质
const material2 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture2,
});
const mesh2 = new THREE.Mesh(geometry2, material2);
scene.add(mesh2);
// 3. 圆形平面设置纹理贴图
scene.remove(mesh2);
const geometry3 = new THREE.CircleGeometry(100);
const textureLoader3 = new THREE.TextureLoader();
const texture3 = textureLoader3.load('./img/6.JPG');
// 材质
const material3 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture3,
});
const mesh3 = new THREE.Mesh(geometry3, material3);
scene.add(mesh3);
// 4. 纹理对象Texture阵列
scene.remove(mesh3);
const geometry4 = new THREE.PlaneGeometry(400, 400);
const textureLoader4 = new THREE.TextureLoader();
const texture4 = textureLoader4.load('./img/6.JPG');
texture4.wrapS = THREE.RepeatWrapping;
texture4.wrapT = THREE.RepeatWrapping;
texture4.repeat.set(10, 10);
// 材质
const material4 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture4,
side: THREE.DoubleSide,
});
const mesh4 = new THREE.Mesh(geometry4, material4);
mesh4.rotateX(-Math.PI / 2);
scene.add(mesh4);
// 5. 矩形Mesh+背景透明png贴图
scene.remove(mesh4);
const geometry5 = new THREE.PlaneGeometry(600, 200);
const textureLoader5 = new THREE.TextureLoader();
const texture5 = textureLoader5.load('./img/6.JPG');
texture5.wrapS = THREE.RepeatWrapping;
// 材质
const material5 = new THREE.MeshLambertMaterial({
// color:0x0000ff,
map: texture5,
side: THREE.DoubleSide,
transparent: true,
});
const mesh5 = new THREE.Mesh(geometry5, material5);
mesh5.rotateX(-Math.PI / 2);
scene.add(mesh5);
// 网格地面辅助观察
const grid = new THREE.GridHelper(500, 10);
grid.position.set(0, -0.01, 0);
scene.add(grid);
mesh5.position.y = 1
// ********** 本章知识点示例代码 End **********
// 光源
const pointLight = new THREE.PointLight(0xffffff, 1.0, 0, 0);
pointLight.position.set(200, 200, 200 );
scene.add(pointLight);
// 环境光
const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);
scene.add( ambientLight );
// 坐标系
const axes = new THREE.AxesHelper(200);
scene.add(axes);
// 相机
const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);
// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
// 控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
renderer.render(scene, camera);
});
// 渲染循环
function render() {
texture5.offset.x += 0.005;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</html>