大佬教程收集整理的这篇文章主要介绍了tree,js的简单实现内容显示,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
tree,js的简单实现内容显示,对模型的gltf进行引用内容显示
加载所用资源https://github wangt.cc /mrdoob/three.js
<!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>
以上是大佬教程为你收集整理的tree,js的简单实现内容显示全部内容,希望文章能够帮你解决tree,js的简单实现内容显示所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。