个人中心
gpt4 book ai didi

javascript - 向 json 对象添加纹理 - Three.js

转载 作者：行者123 更新时间：2023-12-03 05:22:46 24 4
gpt4 key购买 nike

我正在尝试向我从 clara.io 导出的 3D Dog JSON 模型添加纹理。我已经使用 Ojectloader 加载 3D 模型，然后尝试使用 Textureloader 加载纹理，但纹理似乎没有加载到模型上。

也许我的代码是错误的，或者是在错误的地方。我曾尝试查看人们如何做到这一点的其他示例，但运气不佳。正如我所说，问题是纹理似乎没有将图像加载到模型上。 Chrome 的控制台上也没有错误。

如果有人能提供帮助，谢谢。

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>three.js webgl - loaders - Clara.io JSON loader</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <style>
                body {
                    font-family: Monospace;
                    background-color: #000;
                    color: #fff;
                    margin: 0px;
                    overflow: hidden;
                }
                #info {
                    color: #fff;
                    position: absolute;
                    top: 10px;
                    width: 100%;
                    text-align: center;
                    z-index: 100;
                    display:block;
                }
                #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
            </style>
        </head>

        <body>

            <script src="three.js"></script>
            <script src="Detector.js"></script>
            <script src="stats.min.js"></script>
            <script src="UnpackDepthRGBAShader.js"></script>
            <script src="ShadowMapViewer.js"></script>
            <script src="dat.gui.min.js"></script>
            <script src="OrbitControls.js"></script>

            <script>
                var container, stats;
                var camera, scene, renderer;
                var mouseX = 0, mouseY = 0;
                var windowHalfX = window.innerWidth / 2;
                var windowHalfY = window.innerHeight / 2;
                init();
                animate();
                function init() {
                    container = document.createElement( 'div' );
                    document.body.appendChild( container );
                    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                    camera.position.z = 4;
                    // scene
                    scene = new THREE.Scene();
                    var ambient = new THREE.AmbientLight( 0x444444 );
                    scene.add( ambient );
                    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                    directionalLight.position.set( 0, 0, 1 ).normalize();
                    scene.add( directionalLight );

                    //new attempt at a texture and object loader
                    var loader = new THREE.TextureLoader();
                    loader.load("dogtexture.jpg", function ( texture ) {
                        var material = new THREE.MeshBasicMaterial({ map: texture });
                        var objectLoader = new THREE.ObjectLoader();
                        objectLoader.load( "blue-dog1.json", function( obj, texture ) {
                            obj.scale.set( .04, .04, .04);
                            scene.add( obj,texture );
                        });
                    });


                    // BEGIN Clara.io JSON loader code
                    //var objectLoader = new THREE.ObjectLoader();
                    //objectLoader.load("blue-dog.json", function ( obj ) {
                    //obj.scale.set( .045, .045, .045);
                     //scene.add( obj );
                    //});

                    //var loader = new THREE.TextureLoader();
                    //loader.load("dogtexture.jpg", function ( texture ) {
                    // do something with the texture
                    //var material = new THREE.MeshNormalMaterial( {    map:          //texture} );
                    //} );

                    // END Clara.io JSON loader code
                    renderer = new THREE.WebGLRenderer();
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    container.appendChild( renderer.domElement );

                }

                //
                function animate() {
                    requestAnimationFrame( animate );
                    render();
                }
                function render() {
                    camera.position.x = 400;//vertical camera angle
                    camera.position.y = 300;
                    camera.position.z = 150;

                    camera.lookAt( scene.position );
                    renderer.render( scene, camera );
                }
            </script>

        </body>
    </html>

最佳答案

MeshNormalMaterial 可能不是您想要的 Material 类型。
尝试 MeshBasicMaterial 或 MeshPhongMaterial。

MeshNormalMaterial 的描述取自 here

A material that maps the normal vectors to RGB colors.

向下滚动 three.js docs 的左侧查看其他类型的可用 Material 。

编辑..
你永远不会将 Material 添加到物体上..

编辑..
添加一些示例代码。我将使用 ObjectLoader 因为你似乎可以使用它。 

// Create material for later use.
var material = new THREE.MeshBasicMaterial();
// Create ObjectLoader.
var objectLoader = new THREE.ObjectLoader();
// Initiate load of model
objectLoader.load("blue-dog1.json", function(obj) {
  // The documentation for ObjectLoader says it can't load geometries.. confusing (I have never used the ObjectLoader class)
  // But since you say it is working, we'll run with it.
  // obj will be an Object3D, so we must traverse it's children and add the material (I think).
  obj.traverse(function(child) {
    if(child instanceof THREE.Mesh) {
      child.material = material;
    }
  }
  // Now the Object is loaded and the material is applied..
  // Add it to the scene (maybe do this after the texture is loaded?).
  scene.add(obj);
  // Load the texture.
  var loader = new THREE.TextureLoader();
  loader.load("dogtexture.jpg", function(texture) {
    // Apply texture to material.
    material.map = texture;
    // Maybe this is needed.
    material.needsUpdate = true;
  }
}

此代码未经测试，可能存在一些关闭问题，但它应该让您走上正轨。
如果您无法使其正常工作，请尝试使用 JSONLoader 类搜索示例。

关于javascript - 向 json 对象添加纹理 - Three.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41306735/

24 4 0
文章推荐： javascript - Google 表格上的提交按钮
文章推荐： javascript - 在 Javascript 内部执行 Javascript？
文章推荐： javascript - EmberJS 无法读取未定义的属性 'on'
文章推荐： javascript - jQuery正则表达式限制用户输入整数和 float 值
行者123
个人简介

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

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