当前位置：首页 > news >正文

Three.js之模型对象、材质

news 2025/7/13 10:25:25

参考资料

三维向量Vector3与模型位置
…
克隆.clone()和复制.copy()

知识点

注：基于Three.jsv0.155.0

三维向量Vector3与模型位置
欧拉Euler与角度属性.rotation
模型材质颜色(Color对象)
模型材质父类Material：透明、面属性
模型材质和几何体属性
克隆.clone()和复制.copy()

代码实现

<!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 = 800const 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) // 2console.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>