Question

我使用Three.js创建了简单的示例，之前我已经使用它构建了一些代码，但它没有被组织为类，在mof =这样违反代码之后，视图中没有显示任何问题。

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title> </title>
</head>
<body>

<div id="scenecontainer"></div>

<script src="../js/libs/three.js/three.js"></script>
<script src="../js/libs/Detector.js"></script>
<script src="../js/libs/stats.min.js"></script>
<script src="../js/libs/RequestAnimationFrame.js"></script>

<script src="../js/lab/common/CommonExperiment.js"></script>
<script src="../js/lab/common/commonMain.js"></script>
</body>
</html>

main.js

var viewport;
var commonExperiment;

function main() {
    viewport = document.getElementById("scenecontainer");
    commonExperiment = new CommonExperiment(viewport);
    commonExperiment.addTestCube();
    commonExperiment.animate();
}

main();

CommonExperiment.js

function CommonExperiment(domElement, renderStatistics) {
    this.testMesh = undefined;

    this.scene = undefined;
    this.renderer = undefined;
    this.stats = undefined;
    this.camera = undefined;
    this.renderStatistics = ( renderStatistics != undefined ) ? renderStatistics : true;
    this.domElement = domElement;

    this.init();
}

CommonExperiment.prototype.init = function () {
    if (Detector.webgl) {
        this.renderer = new THREE.WebGLRenderer({
            antialias:true, // to get smoother output
            preserveDrawingBuffer:true
        });
    } else {
        Detector.addGetWebGLMessage();
        return;
    }


    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.domElement.appendChild(this.renderer.domElement);

    if (this.renderStatistics) {
        this.stats = new Stats();
        this.stats.domElement.style.position = 'absolute';
        this.stats.domElement.style.bottom = '0px';
        document.body.appendChild(this.stats.domElement);
    }

    // create a scene
    this.scene = new THREE.Scene();

    // put a camera in the scene
    this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    this.camera.position.z = 1000;
    this.scene.add(this.camera);



};

CommonExperiment.prototype.animate = function () {
    requestAnimationFrame(this.animate.bind(this));

    this.render();
//    console.log("ahmed");

    if (this.stats) {
        this.stats.update();
    }
};

// just test donot use
CommonExperiment.prototype.addTestCube = function () {
    var geometry = new THREE.CubeGeometry(200, 200, 200);
    var material = new THREE.MeshBasicMaterial({ color:0xff0000, wireframe:true });
    this.testMesh = new THREE.Mesh(geometry, material);
    this.scene.add(this.testMesh);
};

// to be overide
CommonExperiment.prototype.render = function () {
    this.testMesh.rotation.x += 0.01;
    this.testMesh.rotation.y += 0.02;
};

任何帮助？生病了:)。

Answer 1

对不起我忘了添加

this.renderer.render(this.scene,this.camera);

在渲染循环结束时。

谢谢:)。

Three.js代码在场景中什么都没显示？

1 个答案: