个人中心
gpt4 book ai didi

javascript - 三个.js导入纹理

转载 作者：行者123 更新时间：2023-12-02 18:56:04 24 4
gpt4 key购买 nike

我正在使用 Three.js ，现在有一个以 json 加载的场景，其中包含地板和汽车。一切都很好，但汽车只是黑色，并且没有 blender 的纹理。是否有可能直接使用 blender 中的纹理导出它或之后添加纹理？

这是我使用的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>three.js - pointerlock controls</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background-color: #eeeeee;
            margin: 0;
            overflow: hidden;
            font-family: arial;
        }

        #blocker {

            position: absolute;

            width: 100%;
            height: 100%;

            background-color: rgba(0,0,0,0.5);

        }

        #instructions {

            width: 100%;
            height: 100%;

            display: -webkit-box;
            display: -moz-box;
            display: box;

            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal;

            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;

            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;

            color: #ffffff;
            text-align: center;

            cursor: pointer;

        }

    </style>
</head>
<body>
    <script src="../build/three.min.js"></script>
    <script src="js/controls/PointerLockControls.js"></script>

    <div id="blocker">

        <div id="instructions">
            <span style="font-size:40px">Click to move</span>
            <br />
            (WASD or Arrow Keys = Move, SPACE = Jump, MOUSE = Look around)
        </div>

    </div>

    <script>

        var camera, scene, renderer;
        var geometry, material, mesh;
        var loader;
        var mesh2;
        var loadModel;
        var controls,time = Date.now();

        var objects = [];

        var ray;

        var blocker = document.getElementById( 'blocker' );
        var instructions = document.getElementById( 'instructions' );

        // http://www.html5rocks.com/en/tutorials/pointerlock/intro/

        var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;

        if ( havePointerLock ) {

            var element = document.body;

            var pointerlockchange = function ( event ) {

                if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {

                    controls.enabled = true;

                    blocker.style.display = 'none';

                } else {

                    controls.enabled = false;

                    blocker.style.display  = '-webkit-box';
                    blocker.style.display = '-moz-box';
                    blocker.style.display = 'box';

                    instructions.style.display = '';

                }

            }

            var pointerlockerror = function ( event ) {

                instructions.style.display = '';

            }

            // Hook pointer lock state change events
            document.addEventListener( 'pointerlockchange', pointerlockchange, false );
            document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
            document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );

            document.addEventListener( 'pointerlockerror', pointerlockerror, false );
            document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
            document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );

            instructions.addEventListener( 'click', function ( event ) {

                instructions.style.display = 'none';

                // Ask the browser to lock the pointer
                element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;

                if ( /Firefox/i.test( navigator.userAgent ) ) {

                    var fullscreenchange = function ( event ) {

                        if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {

                            document.removeEventListener( 'fullscreenchange', fullscreenchange );
                            document.removeEventListener( 'mozfullscreenchange', fullscreenchange );

                            element.requestPointerLock();
                        }

                    }

                    document.addEventListener( 'fullscreenchange', fullscreenchange, false );
                    document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );

                    element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;

                    element.requestFullscreen();

                } else {

                    element.requestPointerLock();

                }

            }, false );

        } else {

            instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';

        }

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );


            scene = new THREE.Scene();
            scene.fog = new THREE.Fog( 0xffffff, 0, 750 );

            var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            var light = new THREE.DirectionalLight( 0xffffff, 0.75 );
            light.position.set( -1, - 0.5, -1 );
            scene.add( light );

            controls = new THREE.PointerLockControls( camera );
            scene.add( controls.getObject() );

            ray = new THREE.Raycaster();
            ray.ray.direction.set( 0, -1, 0 );

            // floor

            geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
            geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

            for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

                var vertex = geometry.vertices[ i ];
                vertex.x += Math.random() * 20 - 10;
                vertex.y += Math.random() * 2;
                vertex.z += Math.random() * 20 - 10;

            }

            for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {

                var face = geometry.faces[ i ];
                face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
                face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

            }

            material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            // objects
    loader = new THREE.JSONLoader(  );
    loadModel = function(geometry) 
        {                        
            mesh2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ) } ) );
            mesh2.scale.set(0.1, 0.1, 0.1);
            mesh2.position.set(0, 1, 0);
            mesh2.rotation.set(29.85, 3.14, 2);

            scene.add( mesh2 );
        };
    loader.load('blender.js/auto.js', loadModel );            


            //

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            //

            controls.isOnObject( false );

            ray.ray.origin.copy( controls.getObject().position );
            ray.ray.origin.y -= 10;

            var intersections = ray.intersectObjects( objects );

            if ( intersections.length > 0 ) {

                var distance = intersections[ 0 ].distance;

                if ( distance > 0 && distance < 10 ) {

                    controls.isOnObject( true );

                }

            }

            controls.update( Date.now() - time );

            renderer.render( scene, camera );

            time = Date.now();

        }

    </script>
</body>
</html>

带有//objects的部分是我加载汽车的地方，我已经尝试添加一些示例纹理，但效果不佳。最好的情况是我可以简单地将纹理与模型一起导入 blender 中。

最佳答案

如何从 blender 导出的教程:here

加载带有纹理的对象:

var loader = new THREE.JSONLoader();          

loader.load( "obj.js", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     mesh = new THREE.Mesh(geometry, materials);
     scene.add(mesh)
});

单独添加纹理:

var loader = new THREE.JSONLoader();          

loader.load( "obj.js", function(geometry) {

     var texture = THREE.ImageUtils.loadTexture(textureUrl);
     var material = new THREE.MeshLambertMaterial({map: texture});
     mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh)
});

关于javascript - 三个.js导入纹理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15334952/

24 4 0
文章推荐： php - 使用AJAX .on(click)方法提交多个HTML表单+其他变量数据
文章推荐： bash - 即使测试失败，TravisCI构建也会成功
文章推荐： docker - Docker 1.12群服务添加卷
文章推荐： javascript - 在 Javascript 中创建 JSON
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com