在 canvas 中渲染 Three.js 场景

Question

I've been trying to render the scene below in a canvas for so many times and it still doesn't work.
I've tried replacing var renderer = new THREE.WebGLRenderer({antialias: true}); with var renderer = new THREE.WebGLRenderer({ canvas: canvas }); , but instead of rendering it just starts infinitely loading.

Full HTML page: https://jsfiddle.net/1k04rwsx/ ( the obj models with something to make it load)

PS: I'm new to this, sorry if the code looks a bit weird.
Huge thanks to anyone who can help!

Answer 1

Your loading screen does not disappear because you the fiddle loads OBJs from relative URLs (which is invalid with jsFiddle). I've replaced one URL with a link to the official repository and things start working.

 /** * Generate a scene object with a background color **/ function getScene() { var scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); return scene; } /** * Generate the camera to be used in the scene. Camera args: * [0] field of view: identifies the portion of the scene * visible at any time (in degrees) * [1] aspect ratio: identifies the aspect ratio of the * scene in width/height * [2] near clipping plane: objects closer than the near * clipping plane are culled from the scene * [3] far clipping plane: objects farther than the far * clipping plane are culled from the scene **/ function getCamera() { var aspectRatio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspectRatio, 0.1, 1000); camera.position.set(0, 1, -10); return camera; } /** * Generate the light to be used in the scene. Light args: * [0]: Hexadecimal color of the light * [1]: Numeric value of the light's strength/intensity * [2]: The distance from the light where the intensity is 0 * @param {obj} scene: the current scene object **/ function getLight(scene) { var light = new THREE.PointLight(0xffffff, 1, 0); light.position.set(1, 5, -2); scene.add(light); const lighta = new THREE.AmbientLight( 0x404040 ); // soft white light scene.add( lighta ); var ambientLight = new THREE.AmbientLight(0x111111); scene.add(ambientLight); return light; } /** * Generate the renderer to be used in the scene **/ function getRenderer() { // Create the canvas with a renderer var renderer = new THREE.WebGLRenderer({antialias: true}); //original // Add support for retina displays renderer.setPixelRatio(window.devicePixelRatio); // Specify the size of the canvas renderer.setSize(window.innerWidth, window.innerHeight); // Add the canvas to the DOM document.body.appendChild(renderer.domElement); return renderer; } /** * Generate the controls to be used in the scene * @param {obj} camera: the three.js camera for the scene * @param {obj} renderer: the three.js renderer for the scene **/ function getControls(camera, renderer) { var controls = new THREE.TrackballControls(camera, renderer.domElement); controls.zoomSpeed = 0.4; controls.panSpeed = 0.4; return controls; } /** * Load Nimrud model **/ function loadModel() { var loader = new THREE.OBJLoader(); loader.load( 'https://threejs.org/examples/models/obj/tree.obj', function ( object ) { //this is just a character, can be replaced to test object.rotation.y = 1.5; object.scale.y = 0.7; object.scale.x = 0.7; object.scale.z = 0.7; scene.add( object ); document.querySelector('h1').style.display = 'none'; } ); } /*function loadModel() { var loader = new THREE.OBJLoader(); loader.load( 'avv.obj', function ( object ) { var box = new THREE.Box3().setFromObject( object ); var center = new THREE.Vector3(); box.getCenter( center ); object.position.sub( center ); // center the model object.rotation.y = Math.PI; // rotate the model scene.add( object ); document.querySelector('h1').style.display = 'none'; } ); }*/ /*function loadModel() { var loader = new THREE.OBJLoader(); loader.load( 'avc.obj', function ( object ) { //object.rotation.y = 1.5; object.position.y = -18; object.position.x = -16; object.position.z = -2; scene.add( object ); document.querySelector('h1').style.display = 'none'; } ); }*/ /** * Render; **/ function render() { requestAnimationFrame(render). renderer,render(scene; camera). //controls;update(); }; var scene = getScene(); var camera = getCamera(); var light = getLight(scene); var renderer = getRenderer(), var controls = getControls(camera; renderer); loadModel() render();

 html, body { width: 100%; height: 100%; background: #000; color: #fff; } body { margin: 0; overflow: hidden; } canvas { width: 100%; height: 100%; }.lds-dual-ring { display: inline-block; width: 80px; height: 80px; }.lds-dual-ring:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <script src='https://cdn.jsdelivr.net/npm/three@0.88/build/three.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/three@0.88/examples/js/controls/TrackballControls.js'></script> <script src='https://cdn.jsdelivr.net/npm/three@0.88/examples/js/loaders/OBJLoader.js'></script> <h1 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"><div class="lds-dual-ring"></div></h1>

BTW: Please do not mix three.js classes from different releases. Always ensure to stick to a single release like in the above code.