How to use plain Three.js in your React apps
https://itnext.io/how-to-use-plain-three-js-in-your-react-apps-417a79d926e0
この記事を参考にしながら、Reactアプリで、Three.jsを描画するコードを書いたのですが、
実行するとmacのファンがやばいくらいうるさくなって、異常に発熱するので、
無限ループがどこかにあるような気がしますが、見つかりません。
このどこかに、悪さをしているところがあると思いますが、
そういうのを見つけるのが得意な方、お願いします。????♂️
ThreeCard/index.js
jsx
1import * as React from 'react' 2import threeEntryPoint from './threejs/threeEntryPoint' 3 4 5export default class ThreeCard extends React.Component { 6 componentDidMount() { 7 const { fields } = this.props.device.lastLog 8 threeEntryPoint(this.threeRootElement, fields) 9 } 10 render() { 11 return <div ref={element => (this.threeRootElement = element)} /> 12 } 13}
ThreeEntryPoint.js
js
1import SceneManager from './SceneManager' 2 3export default (container, fields) => { 4 const canvas = createCanvas(document, container) 5 const sceneManager = new SceneManager(container, canvas, fields) 6 7 bindEventListeners() 8 render() 9 10 function createCanvas(document, container) { 11 const canvas = document.createElement('canvas') 12 container.appendChild(canvas) 13 return canvas 14 } 15 16 function bindEventListeners() { 17 window.onresize = resizeCanvas 18 resizeCanvas() 19 } 20 21 function resizeCanvas() { 22 canvas.style.width = '100%' 23 canvas.style.height = '100%' 24 25 canvas.width = canvas.offsetWidth 26 canvas.height = canvas.offsetHeight 27 28 sceneManager.onWindowResize() 29 } 30 31 function render(time) { 32 requestAnimationFrame(render) 33 sceneManager.update() 34 } 35}
ScreenManager.js
js
1import * as THREE from 'three' 2 3export default (container, canvas, fields) => { 4 var scene = new THREE.Scene() 5 var camera = new THREE.PerspectiveCamera( 6 75, 7 window.innerWidth / window.innerHeight, 8 0.1, 9 1000, 10 ) 11 camera.position.z = 3 12 camera.position.y = 1 13 14 var renderer = new THREE.WebGLRenderer() 15 renderer.setSize(window.innerWidth, window.innerHeight) 16 container.appendChild(renderer.domElement) 17 18 // light 19 var light = new THREE.PointLight(0xffff00) // soft white light 20 light.position.set(5, 5, 5) 21 light.castShadow = true //default is false 22 scene.add(light) 23 24 // xyz axes 25 var axesHelper = new THREE.AxesHelper(5) 26 scene.add(axesHelper) 27 28 // cube 29 var geometry = new THREE.BoxGeometry(1, 1, 1) 30 var material = new THREE.MeshPhongMaterial({ color: 0xffffff }) 31 var cube = new THREE.Mesh(geometry, material) 32 cube.castShadow = true //default is false 33 cube.receiveShadow = true //default 34 cube.scale.set(0.5, 2, 0.5) 35 scene.add(cube) 36 37 var update = function() { 38 requestAnimationFrame(update) 39 cube.rotation.set(fields.x, fields.y, fields.z) //傾きを変更 40 renderer.render(scene, camera) 41 } 42 43 function onWindowResize() { 44 const { width, height } = canvas 45 46 camera.aspect = width / height 47 camera.updateProjectionMatrix() 48 49 renderer.setSize(width, height) 50 } 51 52 return { 53 update, 54 onWindowResize, 55 } 56}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。