首页 > 其他分享 >three.js

three.js

时间：2022-08-14 01:29:04浏览次数：79  
标签：set console scene three add position js gltf 

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

标签：set,console,scene,three,add,position,js,gltf
From： https://www.cnblogs.com/xiaoranya/p/16584678.html

相关文章

  • json
    json也称为javascriptobjectnotation格式如下所示：>>>my_json={'name':'Python','address':{'porvince':'吉林','city':['长春','吉林']}}>>>my_json{'name':'Py......
  • js | 防抖&&节流
    正常：事件触发非常频繁，每一次触发，回调函数都会执行，如果时间很短，回调函数中有计算，有可能会出现浏览器卡顿防抖：前面所有的触发都会取消，最后一次的执行在规定的时间......
  • Three---面向对象与面向过程/属性和变量/关于self/一些魔法方法的使用/继承/super方法
    python的面向对象面向对象与面向过程面向过程面向过程思想：需要实现一个功能的时候，看重的是开发的步骤和过程，每一个步骤都需要自己亲力亲为，需要自己编写代码（自己来做）......
  • JS之事件下
    event（事件源）在事件中，当前操作的那个元素就是事件源，比如网页元素中input有onclick事件，当点击input发送onclic事件时，事件源就是input。事件源是作为event对象的属性存在的......
  • js中es5及es6部分内容
    ES5及ES6es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6es5的新特性严格模式（对应的......
  • nodemon 调试nodeJS的使用方法
    首先你需要全局安装nodemon ，然后要做一个launch.json的配置：{"version":"0.2.0","configurations":[{"name":"Launchserver.js......
  • JS高级知识点大全
    正则表达式正则表达是英文RegExp正则字面量写法/利用构造函数方式,创建一个正则对象,能否匹配所有单个数字newRegExp('\\d','g')正则表达式修饰符:忽略大写-->i;全......
  • ExtJS - Router（路由）
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16581944.html2022年8月13日发布。2022年7月26日从笔记迁移到博客。ExtJS教程汇总：https://www.cnblogs......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99