程序笔记   发布时间:2022-07-21  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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,请注明来意。