CODEWITHSUNDEEP
javascriptthree.js3ddata-visualization
will
will

Reputation: 679

Cant get Scene to render in Three.js

I'm pretty new to three.js and I can't seem to get my scene (or camera) to render. The other parts are working (I am able to render my adobe illustrator vectors that I converted just fine), however if I comment out my scene, camera & renderer code it makes no difference to what's rendered in the browser.

Here is my html:

<canvas id ="slot">
</canvas>

Here is my js:

var c = document.getElementById('slot');
c.height = 282;
c.width = 400;
var cx = c.getContext('2d');

//This doesn't appear to be working ...
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//Working just fine
cx.fillStyle="rgba(255,255,255,0)";
cx.fillRect(0,0,1,1);
cx.fillRect(1,0,1,1);
//....(goes on and on)

var slot = new THREE.Mesh(cx);

// GridHelper
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper( size, divisions )

// Light
var light = new THREE.AmbientLight(0x404040);

// Fog
var fogColor = 0xFFFFFF;
var near = 10;
var far = 100;
var fog = new THREE.Fog(fogColor, near, far)

scene.add(slot, gridHelper, light, fog)

camera.position.z = 5;

renderer.render( scene, camera );

any help would be greatly appreciated

Upvotes: 1

Views: 954

Answers (1)

Ethan Hermsey
Ethan Hermsey

Reputation: 940

I have prepared a jsFiddle with your corrected code.

https://jsfiddle.net/EthanHermsey/qampc5b1/49/

var renderer = new THREE.WebGLRenderer({antialias: true});

var cTexture = new THREE.CanvasTexture( c );

var slot = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2),
  new THREE.MeshBasicMaterial({     
    map: cTexture,
    transparent: true
  })
);
scene.add(slot);

scene.fog = new THREE.Fog(fogColor, near, far);
  1. You cant initialize a Mesh like that.
  2. You have to add the canvas as a CanvasTexture to a material.
  3. You cant .add() fog to the scene, it is like this: scene.fog = new THREE.Fog(). This is what gave the error message.
  4. I don't think you can add multiply objects to the scene like that. (but i'm not sure)
  5. Added antialias to the render (makes edges smoother).

Upvotes: 2

Related Questions