投稿
  1. 云图网首页
  2. 技术专区
  3. 编程笔记

three.js

• 编程笔记 • 阅读 25 


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);
});

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/280371.html

赞 (0)
0 0
上一篇 2022年8月14日 01:50
下一篇 2022年8月14日 01:50

相关推荐

发表回复

登录后才能评论