Три JS с сайтом не показывает ошибок, но не работает - PullRequest
Новая
       7

Три JS с сайтом не показывает ошибок, но не работает

0 голосов
/ 28 ноября 2018

Я пытаюсь просто скопировать страницу примера three.js на свой маленький веб-сайт с холстом, к которому следует добавить 3d-анимацию.Но он просто ничего не показывает, хотя и не показывает ошибок.Я попытался выяснить это самостоятельно, но, похоже, ничего не работает: (

У меня есть элемент canvas в одном div на странице: 

var canvas = document.getElementById("background");
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.canvas = canvas;
renderer.setSize(canvas.innerWidth, canvas.innerHeight);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var animate = function() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();
#background {
  height: 100%;
  width: 100%;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>
<canvas id='background'></canvas>

Не могли бы вы взглянуть и показать, что я сделал не так?

1 Ответ

0 голосов
/ 28 ноября 2018

Если нет причин пытаться создать свой собственный холст, вы можете просто позволить Three.js создать свой собственный со следующим кодом: 

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

При этом он создает новый элемент, задающий высотуи ширину, чтобы соответствовать окну, а затем добавляет его в HTML.

Для дальнейшего изменения стиля вы должны использовать 

 renderer.domElement.style.attribute = "";

, а затем вы просто заменяете атрибут тем, что вы пытаетесь изменить,Дополнительные примеры вы можете посетить по этой ссылке:

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

...