无法在 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. 为渲染添加了抗锯齿（使边缘更平滑）。