Question

所以我的问题很简单：我试图用一个html画布链接一个three.js脚本。但我失败了，我真的不知道该怎么做。这是我的代码（我已经在HTML头中加载了必要的脚本）：`

  window.onload = function() {
var container, stats;
var camera, scene, renderer;

var mouseX = 0, mouseY = 0;

var windowHalfX;
var windowHalfY;

init();
animate();


function init() {

    container = document.getElementById('mon_canvas');

            width = container.width;
            height = container.height;
            alert("Width :"+width+",Height :"+height);

           windowHalfX=width/2;
           windowHalfY=height/2;

    camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
    camera.position.z = 300;

            // On ajoute les controles
            controls = new THREE.OrbitControls( camera );
    controls.addEventListener( 'change', render );
    // scene

    scene = new THREE.Scene();

        var ambient = new THREE.AmbientLight( 0x101030 );
    scene.add( ambient );

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 ).normalize();
    scene.add( directionalLight );

    // model

    var loader = new THREE.OBJMTLLoader();
    loader.load( './three/obj/male02/male02.obj', './three/obj/male02/male02_dds.mtl', function ( object ) {
        object.position.y = - 80;
        scene.add( object );
    } );
    //

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    container.appendChild( renderer.domElement );
    //

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

}

    function onWindowResize() {
           windowHalfX = width / 2;
    windowHalfY = height / 2;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize( width, height );
    render();
}

function animate() {
        requestAnimationFrame( animate );
    controls.update();

}

function render() {
          // camera.lookAt( scene.position );
        renderer.render( scene, camera );
    stats.update();

}
  }

`

以及我在HTML正文代码中的内容： <canvas style="border: dashed 1px black;margin-left: 25%;" id="mon_canvas" width="500" height="500"> Sorry, no Webgl for you, IE user :c. </canvas>

我真的没有看到问题。

Answer 1

而不是使用canvas标签尝试使用div代替。我没有运气直接将three.js对象放入画布。无论如何，库都会在div中放置一个画布，因此在使用three.js时我从不使用canvas标签。

<div style="border: dashed 1px black;margin-left: 25%;" id="mon_canvas" width="500" height="500"> Sorry, no Webgl for you, IE user :c. </div>

此外，如果您使用chrome，请使用开发人员工具确保从正确的位置加载obj和任何图像。根据您导出obj文件的方式，MTL文件可能使用绝对文件位置而不是相对文件。

尝试将three.js OBJLoader放入HTML画布中

1 个答案: