threejs学习记录

参考文档【ThreeJS快速入门指南_three js-CSDN博客】

实物图如下：

代码如下：

// 引入three.js
import * as THREE from "three";
console.log(THREE,111);
import { OrbitControls } from "three/addons";// 1. 引入图片
import floor from "@/assets/img/floor_wood.jpg";
// 立方体的顶部纹理
import grass_top from "@/assets/img/grass_top.png";
// 立方体的侧边纹理
import grass_side from "@/assets/img/grass_side.png";
// 立方体的底部纹理
import grass_bottom from "@/assets/img/grass_bottom.png";const IndexPage: React.FC = () => {// 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.pixelRatio = window.devicePixelRatio;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);// 2. 创建场景
const scene = new THREE.Scene();// 3. 创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
camera.position.set(5, 5, 10);
camera.lookAt(0, 0, 0);// 4. 创建物体
const axis = new THREE.AxesHelper(5);
scene.add(axis);// 2. 初始化纹理加载器
const textloader = new THREE.TextureLoader();
// 添加立方体
const geometry = new THREE.BoxGeometry(4, 4, 4);
// const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const material = [new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_top),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_bottom),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),
];
// 5. 渲染
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
// 2.
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);// 3.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 1. 渲染器能够渲染阴影效果
renderer.shadowMap.enabled = true;// 2. 该方向会投射阴影效果
directionalLight.castShadow = true;// 3. 
cube.castShadow = true;
// 4. 
const planeGeometry = new THREE.PlaneGeometry(20, 20);
// const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
// 3. 给地板加载纹理
const planeMaterial = new THREE.MeshStandardMaterial({map: textloader.load(floor),
});
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = -0.5 * Math.PI;
planeMesh.position.set(0, -3, 0);
planeMesh.receiveShadow = true;
scene.add(planeMesh);// 5. 方向光的辅助线
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight
);
scene.add(directionalLightHelper); // 辅助线renderer.render(scene, camera);
const clock = new THREE.Clock();function animate() {requestAnimationFrame(animate);const elapsedTime = clock.getElapsedTime(); // 返回已经过去的时间, 以秒为单位cube.rotation.y = elapsedTime * Math.PI; // 两秒自转一圈renderer.render(scene, camera);
}animate()return null
};
export default IndexPage;

环境：    "three": "^0.165.0", node：v20.12.2，react:18.0.11

引入3D模型

代码：

const loader = new GLTFLoader();
loader.load( '/test.glb', function ( gltf ) {console.log('控制台查看加载gltf文件返回的对象结构',gltf);console.log('gltf对象场景属性',gltf.scene);// 返回的场景对象gltf.scene插入到threejs场景中scene.add( gltf.scene );
})

test.glb地址https://download.csdn.net/download/qq_39933787/89492194

放在public文件夹下