We Keep Coding

Three JS not rendering anything at all. It’s all a black screen

I’ve went through similar questions on this site, and I have seen all the things that are recommended. Like, camera positioning (not inside the mesh), calling the render function, setting the (ambient) light. Each and every thing I’ve found so far in the forum I’ve tried, but nothing is working.
Can anyone please look at this fiddle and guide me as to what I am doing wrong?
https://jsfiddle.net/4mxybs5h/1/
// HTML
<main>
<div id="threeContainer">
hi
<canvas #canvas id="canvas"></canvas>
</div>
</main>
// JS
//this.animate(null);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
boxGeometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshBasicMaterial({color: 0xff0000});
mesh = new THREE.Mesh( boxGeometry, material );
canva = document.getElementById("canvas");
renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });
startScene();
animate();
function startScene() {
//let scene = new THREE.Scene();
//let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let light = new THREE.AmbientLight( 0xffaaff );
scene.add( mesh );
light.position.set(10,10,10)
scene.add( light );
camera.position.set(500, 500, 500);
mesh.castShadow = true;
mesh.receiveShadow = true;
//this.renderer.setClearColor('#E5E5E5')
renderer.setClearColor(0xEEEEEE);
//this.renderer.setSize(window.innerWidth, window.innerHeight)
//this.renderer.render(this.scene, this.camera)
//this.renderer.setAnimationLoop(this.animate.bind(this))
//document.body.appendChild(this.renderer.domElement)
// window.addEventListener('resize', () => {
// this.renderer.setSize(window.innerWidth, window.innerHeight)
// this.camera.aspect = window.innerWidth / innerHeight
// this.camera.updateProjectionMatrix();
// })
}
function animate() {
camera.aspect = window.innerWidth / innerHeight
camera.updateProjectionMatrix();
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
//this.mesh.rotation.y += 1;
//document.body.appendChild(this.renderer.domElement)
renderer.render(scene, camera);
}
I feel like it must be something small or obvious, but I am not able to be figure out. Any help is appreciated.

You're not seeing anything because you're setting the camera way off.
Inside the startScene function, change the following:
// From
camera.position.set(500, 500, 500);
// TO
camera.position.set(0, 0, 5);
Applying the above gives:
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
boxGeometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshBasicMaterial({color: 0xff0000});
mesh = new THREE.Mesh( boxGeometry, material );
canva = document.getElementById("canvas");
renderer = new THREE.WebGLRenderer({antialias: true, canvas: canva });
startScene();
animate();
function startScene() {
let light = new THREE.AmbientLight( 0xffaaff );
scene.add( mesh );
light.position.set(10,10,10)
scene.add( light );
camera.position.set(0, 0, 5);
mesh.castShadow = true;
mesh.receiveShadow = true;
renderer.setClearColor(0xEEEEEE);
}
function animate() {
camera.aspect = window.innerWidth / innerHeight
camera.updateProjectionMatrix();
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
renderer.render(scene, camera);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<main>
<div id="threeContainer">
<canvas #canvas id="canvas"></canvas>
</div>
</main>

Resizing THREE.js Object using HTML div

I have two divs that I want to place side-by-side, and one of them contains my THREE.JS window/canvas. Basically, I don't want the THREE.js to take up the entire screen (only 50% of the width or however I adjust it), and so I want to do this with the div I put it in (threejs-container) or with HTML if there's another way. On the left side beside it, I want to be able to put an image or text. For some reason, the renderer canvas is not obeying my div and resizing. How do I fix this?
P.S. I know I can resize it manually using THREE.js, but I also want to be able to easily right-adjust my canvas, so I want to try to avoid doing that. The canvas centers itself on the page, and I also don't know how to change that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VRChat</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<!-- WIP -->
</div>
<!-- This is everything below the nav bar -->
<div class="content-wrapper">
<div class="two-column-wrapper">
<div class="profile-image-wrapper">
<img src="https://data.whicdn.com/images/350807092/original.jpg">
</div>
<div id="threejs-container" style="width: 50%">
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three#0.128.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three#0.128.0/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from 'https://cdn.skypack.dev/three#0.128.0/examples/jsm/loaders/FBXLoader.js';
let camera, scene, renderer;
init();
animate();
function init() {
// https://www.youtube.com/watch?v=FwcXultcBl4
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set(0, 1.3, 3);
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, -50, 100 ); // Adjust the direction from which light shines
dirLight.castShadow = true;
dirLight.shadow.camera.top = 180;
dirLight.shadow.camera.bottom = -100;
dirLight.shadow.camera.left = -120;
dirLight.shadow.camera.right = 120;
scene.add( dirLight );
// Ground
const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false} ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add(mesh);
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
// Model
const loader = new FBXLoader();
loader.load( 'model/minoru_utsugi_v1.8_Quest.fbx', function ( object ) {
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true
}
} );
scene.add(object);
} );
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById("threejs-container").appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set(0, 0.8, 0); // Change this to move camera position
controls.update();
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
// Adjust three.js object size on window resize
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

THREE.js GLTFLoader does not works on loading the 3D model

Hi I am facing a problem on cannot display the 3D model THREE.js GLTFLoader(), the following is my script:
Here is the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>hey</li>
<li>heysda</li>
</ul>
</nav>
<div class="scene"></div>
<script src="./three.min.js"></script>
<script src="./GLTFLoader.js"></script>
<script src="./app.js"></script>
</body>
</html>
here is the js file:
//Variables for setup
let container;
let camera;
let renderer;
let scene;
let house;
function init() {
container = document.querySelector(".scene");
//Create scene
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
//Camera setup
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
const ambient = new THREE.AmbientLight(0x404040, 2);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(50, 50, 100);
scene.add(light);
//Renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
//Load Model
let loader = new THREE.GLTFLoader();
loader.load("./house/scene.gltf", function(gltf) {
scene.add(gltf.scene);
house = gltf.scene.children[0];
animate();
});
}
function animate() {
requestAnimationFrame(animate);
house.rotation.z += 0.005;
renderer.render(scene, camera);
}
init();
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
window.addEventListener("resize", onWindowResize);
I ran the code on notepad++ and chrome browser, but it turned out blank screen without showing my 3D model.
Anyone knows the solution? thanks in advance!

The way how you work with container is problematic since clientHeight is zero when you access it to compute the aspect ratio. I suggest you start with using window.innerWidth and window.innerHeight at the beginning.
Besides, there are two minor issues with your model. The model has an extreme scale so you won't see it with your current camera position. You are way too close. Besides, the model has an offset so it's recommended to center it. Try it with this code:
//Variables for setup
let camera;
let renderer;
let scene;
let house;
init();
function init() {
//Create scene
scene = new THREE.Scene();
const fov = 60;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
//Camera setup
camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set( 0, 0, 5 );
const ambient = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambient );
const light = new THREE.DirectionalLight( 0xffffff, 0.8 );
light.position.set( 0, 0, 10 );
scene.add( light );
//Renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Load Model
const loader = new THREE.GLTFLoader();
loader.load( './house/scene.gltf', function ( gltf ) {
house = gltf.scene;
// scale model down
house.scale.setScalar( 0.001 );
// center it
const box = new THREE.Box3().setFromObject( house );
const center = box.getCenter( new THREE.Vector3() );
house.position.x += ( house.position.x - center.x );
house.position.y += ( house.position.y - center.y );
house.position.z += ( house.position.z - center.z );
scene.add( house );
animate();
} );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize );

TypeError: array[i].call is not a function Error

My code is :
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0xdddddd);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
var axis = new THREE.AxisHelper(10);
scene.add(axis);
var grid = new THREE.GridHelper(50, 5);
var color = new THREE.Color("rgb(255,0,0)");
grid.setColors(color, 0x000000);
scene.add(grid);
var Ground_geometry = new THREE.BoxGeometry( 20, 0.1, 20 );
var Ground_material = new THREE.MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 150,
specular: 0xffffff,
shading: THREE.SmoothShading
} );
var ground = new THREE.Mesh( Ground_geometry, Ground_material );
ground.scale.multiplyScalar( 3 );
ground.castShadow = false;
ground.receiveShadow = true;
scene.add( ground );
var ambient = new THREE.AmbientLight( 0x404040 );
scene.add( ambient );
spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 10, 10, 15 );
spotLight.castShadow = true;
spotLight.shadowCameraNear = 8;
spotLight.shadowCameraFar = 30;
spotLight.shadowDarkness = 0.5;
spotLight.shadowCameraVisible = false;
spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.name = 'Spot Light';
scene.add( spotLight );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', renderer );
var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var cubeMaterial = new THREE.MeshPhongMaterial({
color: 0x456574 ,
shininess: 150,
specular: 0x222222,
shading: THREE.SmoothShading,
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 0;
scene.add(cube);
camera.position.x = 40;
camera.position.y = 40;
camera.position.z = 40;
camera.lookAt(scene.position);
renderer.render(scene, camera);
$("#webGL-container").append(renderer.domElement);
$(window).resize(function(){
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
});
});
I am getting an error that says : TypeError: array[i].call is not a function
and is pointing to line 7484 of three.js library.
I have included the three.js library using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js"></script>
So as you can see, its the v73 and I haven't touched the code. What could be the problem?
The error only comes after screen is clicked and then mouse pointer is dragged, so it must have got to do with that piece of code.

Assuming that you want the scene to render when OrbitControls sends a change event, you'll have to change the code to:
controls.addEventListener( 'change', render );
.
.
.
function render() {
renderer.render( scene, camera );
}
renderer.render( scene, camera );

Three.js Procedural Texture Disappears After Inital Rendering Frame

I'm working with three.js and attempting to create procedural texture which can be stored and then applied to objects later in a session.
Ideally, I would like to create these textures only once each.
I would like to be able to sample from existing assets to create new textures.
Within the three.js example, a version of this is shown where the texture is re-rendered every frame. http://threejs.org/examples/webgl_rtt.html
I have created an example of what I hope to achieve here: http://www.forsako.com/ThreeJS/RenderTest.html
Unfortunately, to make this work, I had to re-render the texture each frame.
Is there a way to perform this rendering so that the texture persists over multiple frames until I tell it to be released? Source from my main program follows.
<html>
<head>
<title>Render Test</title>
</head>
<style>
#mycontainer {
background: #000;
width: 800px;
height: 600px;
}
</style>
<body>
<div id="mycontainer"></div>
</body>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/PlaneGeomUV.js"></script>
<script type="text/javascript">
var Renderer, Container, Scene, Camera, Quad1, Quad2, Plane, MaterialRTT, TextureRTT, LightAmb;
var SceneRTT, CameraRTT, Q1RTT, Q2RTT, Q3RTT, Q4RTT, MaterialFromFile, TextureFromFile;
var isRenderingTex = true;
var WidthWin = 800;
var HeightWin = 640;
var WidthTile = 428;
var HeightTile = 683;
Init();
Animate();
function Init(){
var CAngle = 45;
var CAspect = WidthWin / HeightWin;
var CNearCut = 0.1;
var CFarCut = 10000;
// Set up the main rendering object and attach it to an element on the page
Renderer = new THREE.WebGLRenderer();
Renderer.setSize( WidthWin, HeightWin );
Container = document.getElementById( "mycontainer" );
Container.appendChild( Renderer.domElement );
// Set up the textures and materials for rendering
TextureFromFile = THREE.ImageUtils.loadTexture( "Assets/Map_Tiles.png" );
TextureRTT = MakeTex( Renderer, TextureFromFile, WidthTile, HeightTile );
MaterialFromFile = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureFromFile } );
MaterialRTT = new THREE.MeshBasicMaterial( { color: 0xffffff, map: TextureRTT } );
MaterialFromFile.side = THREE.DoubleSide;
MaterialRTT.side = THREE.DoubleSide;
// Set up the main renderable scene
Scene = new THREE.Scene();
Plane = new THREE.PlaneGeometry( WidthTile, HeightTile );
Quad1 = new THREE.Mesh( Plane, MaterialFromFile );
Quad1.position.x = WidthTile*0.5;
Scene.add( Quad1 );
Quad2 = new THREE.Mesh( Plane, MaterialRTT );
Quad2.position.x = -WidthTile*0.5;
Scene.add( Quad2 );
LightAmb = new THREE.AmbientLight( 0xffffff );
Scene.add( LightAmb );
Camera = new THREE.PerspectiveCamera( CAngle, CAspect, CNearCut, CFarCut );
Camera.position.z = 1200;
Scene.add( Camera );
// Create controls using the TrackballControls library to easily manipulate our camera
Controls = new THREE.TrackballControls( Camera );
Controls.target = new THREE.Vector3( 0, 0, 0 );
Controls.rotateSpeed = 4.0;
Controls.zoomSpeed = 6.0;
Controls.panSpeed = 1.0;
Controls.noZoom = false;
Controls.noPan = false;
Controls.staticMoving = true;
Controls.dynamicDampingFactor = 0.3;
Controls.keys = [ 65, 83, 68 ];
// Add the Three.js stats object so we can track fps
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
Container.appendChild( stats.domElement );
}
function MakeTex( Renderer_in, Texture_in, Width_in, Height_in ){
var ParamsTex = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
var Tex_out = new THREE.WebGLRenderTarget( WidthWin, HeightWin, ParamsTex );
var tMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: Texture_in } );
// Set up the scene for rendering to texture
SceneRTT = new THREE.Scene();
var tPlane = new THREE.PlaneGeometry( WidthTile*0.5, HeightTile*0.5 );
Q1RTT = new THREE.Mesh( tPlane, tMaterial );
Q1RTT.position.x = WidthTile*0.25;
Q1RTT.position.y = HeightTile*0.25;
SceneRTT.add( Q1RTT );
Q2RTT = new THREE.Mesh( tPlane, tMaterial );
Q2RTT.position.x = -WidthTile*0.25;
Q2RTT.position.y = HeightTile*0.25;
SceneRTT.add( Q2RTT );
Q3RTT = new THREE.Mesh( tPlane, tMaterial );
Q3RTT.position.x = -WidthTile*0.25;
Q3RTT.position.y = -HeightTile*0.25;
SceneRTT.add( Q3RTT );
Q4RTT = new THREE.Mesh( tPlane, tMaterial );
Q4RTT.position.x = WidthTile*0.25;
Q4RTT.position.y = -HeightTile*0.25;
SceneRTT.add( Q4RTT );
tLightAmb = new THREE.AmbientLight( 0xffffff );
SceneRTT.add( tLightAmb );
CameraRTT = new THREE.OrthographicCamera( -Width_in / 2, Width_in / 2, Height_in / 2, -Height_in / 2, 0.1, 10000 );
CameraRTT.position.z = 600;
SceneRTT.add( CameraRTT );
//Renderer.clear();
//Renderer.render( SceneRTT, CameraRTT, Tex_out, true );
return Tex_out;
}
function Animate(){
requestAnimationFrame( Animate );
Controls.update();
stats.update();
Render();
}
function Render(){
Renderer.clear();
if( isRenderingTex ){
Renderer.render( SceneRTT, CameraRTT, TextureRTT, true );
//isRenderingTex = false;
}
Renderer.render( Scene, Camera );
}
</script>
</html>