Не могу получить сцену для рендеринга в три. js - PullRequest
Новая
       22

Не могу получить сцену для рендеринга в три. js

1 голос
/ 07 января 2020

Я довольно плохо знаком с тремя. 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 );

любая помощь будет принята с благодарностью

1 Ответ

2 голосов
/ 08 января 2020

Я подготовил 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. Вы не можете инициализировать Me sh таким образом.
  2. Вы должны добавить холст как CanvasTexture к материалу.
  3. Вы не можете добавить .add () туман к сцене, это так: scene.fog = new THREE.Fog ( ). Это то, что дало сообщение об ошибке.
  4. Я не думаю, что вы можете добавить несколько объектов к сцене, как это. (но я не уверен)
  5. Добавлен сглаживание в рендере (делает края более плавными).
...