参考资料
知识点
注:基于Three.jsv0.155.0
- 三维向量Vector3与模型位置
- 欧拉Euler与角度属性.rotation
- 模型材质颜色(Color对象)
- 模型材质父类Material:透明、面属性
- 模型材质和几何体属性
- 克隆.clone()和复制.copy()
代码实现
javascript
<!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();
// 几何体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 材质
const material = new THREE.MeshBasicMaterial({
color:0x0000ff,
});
// 网格模型:物体
const mesh = new THREE.Mesh(geometry, material);
// 位置属性
mesh.position.set(0, 0, 0);
// mesh.position.x = 100;
// mesh.scale.set(2, 2, 2);
// mesh.scale.x = 2;
// mesh.translateOnAxis(new THREE.Vector3(1, 0, 1), 100);
// mesh.translateX(100);
scene.add(mesh);
// 角度属性
// mesh.rotation.x = Math.PI / 4;
// mesh.rotation.set(0, 0, Math.PI / 4);
// mesh.rotateX(Math.PI / 4);
console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:46 ~ mesh.rolation:', mesh.rotation)
// 材料颜色
// mesh.material.color.set('red');
// mesh.material.color.set('#ff0000');
// mesh.material.color.set(0xff0000);
mesh.material.color.r = 1;
// 材料透明度
mesh.material.opacity = 0.8;
mesh.material.transparent = true; // 是否透明
// 材料面属性
// mesh.material.side = THREE.FrontSide; // 正面可见
mesh.material.side = THREE.DoubleSide; // 两面可见
console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:66 ~ mesh.material.side:', mesh.material.side) // 2
console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:63 ~ mesh.material:', mesh.material)
console.log('🚀 ~ file: 3.1三维向量Vector3与模型位置.html:89 ~ mesh.geometry:', mesh.geometry)
// 克隆、复制
const mesh2 = mesh.clone();
mesh2.position.set(200, 0, 0);
mesh2.material = mesh.material.clone();
mesh2.material.color.set(0xff0000);
mesh2.position.copy(mesh.position);
mesh2.position.y += 150;
scene.add(mesh2);
// 坐标系
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() {
mesh.rotateY(0.01);// mesh旋转动画
// 同步mesh2和mesh的姿态角度一样,不管mesh姿态角度怎么变化,mesh2始终保持同步
mesh2.rotation.copy(mesh.rotation);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</html>