无法让场景在Three.js中渲染

Question

我对three.js相当陌生，我似乎无法渲染场景（或相机）。其他部分都在工作（我能够很好地渲染转换后的Adobe illustrator矢量），但是，如果我注释掉场景，相机和渲染器代码，则对浏览器中的渲染没有影响。

这是我的html：

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

这是我的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 );

任何帮助将不胜感激

Answer 1

我已经准备了带有正确代码的jsFiddle。

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. 您无法像这样初始化网格。
2. 您必须将画布作为CanvasTexture添加到材质。
3. 您无法向场景添加.add（）雾，就像这样：scene.fog = new THREE.Fog（）。这就是给出错误消息的原因。
4. 我认为您不能像这样向场景中添加多个对象。 （但我不确定）
5. 向渲染器添加了抗锯齿（使边缘更平滑）。