CODEWITHSUNDEEP
three.js
Aeglet
Aeglet

Reputation: 3

Basic scene breaks transitioning from three.js v87 to v88 or v89

Does anyone know why the following breaks as three.min.js is updated from r87 to r88 or r89? This is just using fundamentals from three.js-related training webistes. With r87 or earlier, a cube is displayed. With r88 or r89, there's just a black canvas. I have tried this with Chrome, Firefox, & IE.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="three.min.js"></script>
<script>
    var renderer = null, scene = null, camera = null;

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

    $(document).ready(function() {
        var canvas = document.getElementById("webglcanvas");

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
        renderer.setSize(canvas.width, canvas.height);

        camera = new THREE.PerspectiveCamera(60, canvas.width / canvas.height, 0.1, 400);
        camera.position.set(60, 100, 100);
        scene.add(camera);

        camera.lookAt({"x": 50.0, "y": 50.0, "z": 50.0});

        var light = new THREE.PointLight(0xffff00);
        light.position.set(50, 50, 50);
        scene.add(light);

        var geometry = new THREE.BoxGeometry(50, 50, 50);
        var material = new THREE.MeshNormalMaterial();
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        render();
    });
</script>
</head>
<body>
   <canvas id="webglcanvas" width="480" height="300"></canvas>
</body>
</html>

Upvotes: 0

Views: 103

Answers (1)

WestLangley
WestLangley

Reputation: 104783

The following is not valid three.js code, and never has been valid three.js code:

camera.lookAt( { "x": 50.0, "y": 50.0, "z": 50.0 } );

Use

camera.lookAt( 50, 50, 50 );

or

camera.lookAt( myVector3 );

three.js r.90

Upvotes: 0

Related Questions