three.js
2022/8/14 6:23:10
本文主要是介绍three.js，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
import * as THREE from 'three';
// 导入轨道控制器库
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入gltf模型载入库
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// 导入解压模型的库
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import {AmbientLight} from "three";
//gltf转glb
//gltf-pipeline -i scene.gltf -o scene.glb
// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight,
0.1, 2000);
// 设置相机位置
camera.position.set(40, 10, 0);
camera.lookAt(0, 10, 0);
// 更新摄像头宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像头投影矩阵
camera.updateProjectionMatrix();
scene.add(camera);//加入场景
//----------------------------begin---------------------------------------
//Light
// scene.add(new THREE.AmbientLight(0xffffff, 0.2))
// const dLight = new THREE.DirectionalLight(0xffffff, 2);
// dLight.position.set(0, 4, 10);
// dLight.castShadow = true;
// dLight.shadow.camera.near = 10;
// dLight.shadow.camera.far = 1000;
// scene.add(dLight);
scene.add(new THREE.AmbientLight(0xffffff, 10));
//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
//地面 groundGroup
const planeGroup = new THREE.Group();
const planeG = new THREE.PlaneBufferGeometry(60, 30);
const planeM = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
color: 0xa4cab6
});
const plane = new THREE.Mesh(planeG, planeM);
// plane.receiveShadow = true;
plane.rotation.x = -Math.PI / 2;
plane.position.y = -0.01;
scene.add(plane)
const geometry = new THREE.BoxGeometry( 2, 2, 2 );
const material = new THREE.MeshStandardMaterial( {color: 0x00ffff} );
const cube1 = new THREE.Mesh( geometry, material );
cube1.position.set(20, 2, 10);
// cube1.castShadow = true;
// scene.add( cube1 );
const cube2 = new THREE.Mesh( geometry, material );
cube2.position.set(20, 2, -10);
// scene.add( cube2 );
//添加模型
//实例化gltf载入库
const loader = new GLTFLoader();
//实例化draco载入库
const dracoLoader = new DRACOLoader();
//添加draco载入库
dracoLoader.setDecoderPath("./draco/");
loader.setDRACOLoader(dracoLoader);
// scene.add(new AmbientLight(0xdddddd));
// loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scale.set(1, 1, 1);
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/large_buildingC.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
//
// loader.load("./GLTFBuild/large_buildingB.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(5, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
//教学楼模型--------------------
const teachBuildGroup = new THREE.Group();
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(20, 0, 5);
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
});
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(18.5, 0, 5);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
});
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(18.5, 0, 7);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
});
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(18.5, 0, 9);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
});
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(20, 0, 10);
gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
// console.log(teachBuildGroup.children);
//a区
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(21.5, 0, 5);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
});
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(21.5, 0, 7);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
});
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(21.5, 0, 9);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(14, 0, 10);
gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(14, 0, -10);
// gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(20, 0, -10);
// gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
const buildClone = teachBuildGroup.clone();
// console.log(teachBuildGroup.children);
buildClone.position.set(-6, 0, 0);
scene.add(buildClone);
const buildClone1 = teachBuildGroup.clone();
buildClone1.position.set(34, 0, 0);
buildClone1.rotation.y = -Math.PI;
scene.add(buildClone1);
const buildClone2 = teachBuildGroup.clone();
buildClone2.position.set(40, 0, 0);
buildClone2.rotation.y = -Math.PI;
scene.add(buildClone2);
scene.add(teachBuildGroup);
});
//------------教学楼模型--------------------
//-----------------宿舍模型--------------------
loader.load("./GLTFBuild/large_buildingA.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(21.5, 0, 9);
gltf.scene.rotation.y = -Math.PI / 2;
gltf.scene.position.z += 0.45;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(14, 0, 10);
gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(14, 0, -10);
// gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
loader.load("./GLTFBuild/large_buildingF.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(20, 0, -10);
// gltf.scene.rotation.y = Math.PI;
// gltf.scene.castShadow = true;
teachBuildGroup.add(gltf.scene);
// console.log(teachBuildGroup.children);
});
const buildClone = teachBuildGroup.clone();
// console.log(teachBuildGroup.children);
buildClone.position.set(-30, 0, -15);
scene.add(buildClone);
const buildClone1 = teachBuildGroup.clone();
buildClone1.position.set(10, 0, 15);
buildClone1.rotation.y = -Math.PI;
scene.add(buildClone1);
const buildClone2 = teachBuildGroup.clone();
buildClone2.position.set(2, 0, 15);
buildClone2.rotation.y = -Math.PI;
scene.add(buildClone2);
const buildClone3 = teachBuildGroup.clone();
buildClone3.position.set(-38, 0, -15);
// buildClone3.rotation.y = -Math.PI;
scene.add(buildClone3);
scene.add(teachBuildGroup);
});
//------------宿舍模型--------------------
loader.load("./blender/操场.glb", (gltf) => {
// console.log(gltf);
// gltf.scene.scale.x = 1;
gltf.scene.position.set(-25, -0.3, 0);
gltf.scene.scale.set(0.05, 0.05, 0.05);
// gltf.scene.castShadow = true;
scene.add(gltf.scene);
});
loader.load("./blender/图书馆.glb", (gltf) => {
// console.log(gltf);
gltf.scene.position.set(5, 5, 0);
gltf.scene.rotation.y = -Math.PI / 2;
// gltf.scene.scale.set(0, 0, 0);
// gltf.scene.castShadow = true;
scene.add(gltf.scene);
});
// loader.load("./GLTFBuild/large_buildingD.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(0, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/large_buildingE.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-2, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
//
// loader.load("./GLTFBuild/large_buildingG.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-7, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/skyscraperA.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-9, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/skyscraperB.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-11, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/skyscraperC.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-13, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/skyscraperD.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-15, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/skyscraperE.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-17, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
// loader.load("./GLTFBuild/skyscraperF.glb", (gltf) => {
// // console.log(gltf);
// // gltf.scene.scale.x = 1;
// gltf.scene.position.set(-19, 0, 5);
// // gltf.scene.castShadow = true;
// scene.add(gltf.scene);
// });
//四个方向的平行光代替环境光
const lightIntensity = 3;
const dirlight1 = new THREE.DirectionalLight(0xffffff, lightIntensity);
dirlight1.position.set(0, 5, 5);
scene.add(dirlight1);
const dirlight2 = new THREE.DirectionalLight(0xffffff, lightIntensity);
dirlight2.position.set(5, 5, 0);
scene.add(dirlight2);
const dirlight3 = new THREE.DirectionalLight(0xffffff, lightIntensity);
dirlight3.position.set(-5, 5, 0);
scene.add(dirlight3);
const dirlight4 = new THREE.DirectionalLight(0xffffff, lightIntensity);
dirlight4.position.set(0, 5, -5);
scene.add(dirlight4);
const roadG = new THREE.PlaneBufferGeometry(50, 5);
const roadM = new THREE.MeshBasicMaterial();
const road = new THREE.Mesh(roadG, roadM);
road.rotation.x = -Math.PI / 2;
road.position.y = 0.01;
road.position.x += 5;
scene.add(road);
//-----------------------------end--------------------------------------
//初始化渲染器
const renderer = new THREE.WebGLRenderer({
// 设置抗锯齿
antialias: true,
// 设置对数深度缓冲区, 避免模型面数过多造成闪烁
logarithmicDepthBuffer: true,
});
// renderer.setClearColor(0x95e4e8);
// renderer.outputEncoding = THREE.sRGBEncoding;
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
//开启阴影渲染
// renderer.shadowMap.enabled = true;
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
//使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);
//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
//设置控制器阻尼，让控制器更有真实效果（惯性） 需在动画循环里面添加 update()
controls.enableDamping = true;
//让画面一直渲染，相当于loop
function render() {
// cube.position.x += 0.01;
// cube.rotation.x += 0.01;
// if(cube.position.x > 5){
// cube.position.x = 0;
// }
//为什么采用下面这种方式渲染？两种实现已经删除了
//因为每一帧渲染的时间长度是不一致的，所以会导致动画时快时慢
// let time = clock.getElapsedTime();
controls.update();
renderer.render(scene, camera);
//渲染下一帧的时候继续调用render()函数
requestAnimationFrame(render);
}
render();
//监听画面变化，更新渲染尺寸，即自适应
window.addEventListener("resize", () => {
// console.log('window size changed');
//更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
//更新摄像机的投影矩阵
camera.updateProjectionMatrix();
//更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
//设置渲染器的像素比
// renderer.setPixelRatio(window.devicePixelRatio);
});
这篇关于three.js的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15useCallback教程：React Hook入门与实践
- 2024-11-15React中使用useContext开发：初学者指南
- 2024-11-15拖拽排序js案例详解：新手入门教程
- 2024-11-15React中的自定义Hooks案例详解
- 2024-11-14受控组件项目实战：从零开始打造你的第一个React项目
- 2024-11-14React中useEffect开发入门教程
- 2024-11-14React中的useMemo教程：从入门到实践
- 2024-11-14useReducer开发入门教程：轻松掌握React中的useReducer
- 2024-11-14useRef开发入门教程：轻松掌握React中的useRef用法
- 2024-11-14useState开发：React中的状态管理入门教程
