javascript - Three.js 3D 模型未显示

标签 javascript html three.js

我尝试了之前看到的所有方法,但没有解决问题。我无法显示 3D 模型。很多人向我提到这是相机的问题,但似乎无法修复。任何帮助将不胜感激:)

<html>
  <head>
    <title>My first Three.js app</title>
    <style>canvas { width: 100%; height: 100% }</style>
  </head>
  <body>
    <script src="O:/FirstPublishedGame/FINAL-STEPS/levels/ForLevel3+/three.js-master/build/Three.js"></script>
    <script src="O:/FirstPublishedGame/FINAL-STEPS/levels/ForLevel3+/three.js-master/src/ob"></script>
    <script>

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, 
    window.innerWidth/window.innerHeight, 0.1, 1000 );
    var element = document.getElementById("container");


    var renderer = new THREE.WebGLRenderer( { alpha: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    element.appendChild( renderer.domElement );

    var loader = new THREE.OBJLoader();
    loader.load(
        'O:/FirstPublishedGame/FINAL-STEPS/levels/ForLevel3+/three.js-master/examples/obj/female02/female02.obj',
        function ( object ) {
            scene.add( object );
    });

    function render() {
        window.requestAnimationFrame( render );
        renderer.render( scene, camera );
    }

    render();

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

最佳答案

您需要一个具有容器 ID 的元素 - 尝试添加

<div id="container"></div>

在你 body 的开始处。

否则你无法为其设置元素。

关于javascript - Three.js 3D 模型未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45357728/

相关文章:

javascript - javascript原型(prototype)的意义到底是什么

javascript - 如何将元素的宽度设置为窗口宽度的一半

javascript - 使用偏移值获取时区缩写

javascript - 如何遍历选定的 HTML 表格行并从每一行中检索数据

html - 如何在 Bootstrap 行中垂直居中文本

javascript - 在 Three.js 中创建锯齿形结构?

PHP 我怎么能回显这个 html?

javascript - 带有 "Progess/Completion bar"的 ReactJS 可折叠元素

三.js - 如何围绕特定点旋转圆柱体?

javascript - Three.js - 纹理未加载