0

Three.js を使用して簡単な例を作成しました。以前にいくつかのコードを作成しましたが、クラスとして編成されていませんでした。mof=defying code like this の後にビューに何も表示されないという問題。

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;
};

助けはありますか？それを感謝します:)。

4

1 に答える 1

1

追加するのを忘れてすみません 

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

レンダリングループの最後に。

ありがとう ：） 。

于 2012-12-09T13:32:45.283 に答える