tree,js的简单实现内容显示，对模型的gltf进行引用内容显示
加载所用资源https://github.com/mrdoob/three.js
整理后代码{
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } #box{ width: 900px; height: 600px; background: #f00; } </style> </head> <body> <div id="box"></div> <script src="./js/three.js"></script> <script type="module"> import { GLTFLoader } from './three/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js'; var renderer,scene,camera,light,loader,controls; var width,height; // 初始化渲染器 Renderer function initRenderer() { width = document.getElementById("box").clientWidth; height = document.getElementById("box").clientHeight; renderer = new THREE.WebGLRenderer({ antialias:true // canvas: document.getElementById('box') });/*生成渲染器对象（属性：抗锯齿效果为设置有效）*/ renderer.setSize(width,height); document.getElementById("box").appendChild(renderer.domElement); /*设置canvas背景色(clearColor)和背景色透明度（clearAlpha） */ renderer.setClearColor(0xFF0000, 1); //设置背景颜色 } // 初始化场景 Scene function initScene(){ scene = new THREE.Scene(); } // 初始化相机 Camera function initCamera() { camera=new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); //定义camera的位置 camera.position.set(4, -3, 5); //这里的lookAt函数是将视角指定为看原点 camera.lookAt(new THREE.Vector3(0, 0, 0)); //将camera添加到scene中 scene.add(camera); } // 初始化光源light function initLight() { light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); //平行光 light.position.set(100, 100, 200); //设置光源位置 scene.add(light); //将光源添加到场景 } // 创建一个长方体 function initCube() { //这里是创建一个长方形 var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: "green", wireframe: true //这里指不使用实心材料，所以为true }) ); //这里要将这个长方形加入这个scene中 scene.add(cube); } // gltf模型加载 function initGltf() { var loader = new GLTFLoader(); loader.load( 'pathD/scene.gltf', function ( gltf ) { console.log(gltf.scene,'----gltf') // 加载出来贴片图片（加载纹理） gltf.scene.traverse( function ( child ) { if ( child.isMesh ) { child.material.emissive = child.material.color; child.material.emissiveMap = child.material.map ; } } ); // 图形缩放 gltf.scene.scale.set(0.3,0.3,0.3) // gltf.scene.rotation.set(100,100,100) // 添加到创景中 scene.add(gltf.scene); }, undefined, function ( error ) { console.error( error ); }); } // 相机空间 function initcontrols() { controls = new OrbitControls( camera, renderer.domElement ); controls.target.set( 0, 0.5, 0 ); controls.update(); controls.enablePan = false; controls.enableDamping = true; } // 全部加载 function threeExcute() { //初始化渲染器 initRenderer(); //初始化场景 initScene(); //初始化照相机 initCamera(); //初始化光源 initLight(); //相机空间 initcontrols(); //长方体 initCube(); //3d图形 initGltf(); } threeExcute() var animate = function () { requestAnimationFrame( animate ); controls.update(); renderer.render( scene, camera ); }; animate(); </script> </body> </html>
未整理，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="./js/three.js"></script>
<script type="module">
import { GLTFLoader } from './three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js';
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var loader = new GLTFLoader();
let gltf2=null;
loader.load( 'pathD/scene.gltf', function ( gltf ) {
console.log(gltf,'----')
gltf2=gltf.scene
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.emissive = child.material.color;
child.material.emissiveMap = child.material.map ;
}
} );
gltf.scene.scale.set(0.3,0.3,0.3)
scene.add( gltf.scene);
}, undefined, function ( error ) {
console.error( error );
} );
// 相机空间
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0.5, 0 );
controls.update();
controls.enablePan = false;
controls.enableDamping = true;
addEventListener('click', onMouseDblclick, false);
function onMouseDblclick(a){
console.log(a,'------nero')
}
// 窗口变动触发的方法
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
camera.position.z = 5;
renderer.setClearColor(0xcccccc, 1); //设置背景颜色
var animate = function () {
requestAnimationFrame( animate );
controls.update();
// if(gltf2)gltf2.rotation.y += 0.01;
// position位置 rotation 角度
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>