var script document createElement script script type text javascript script src https cdnjs cloudflare com ajax libs three js r128 three min js document head appendChild script document body style height 300pt script onload function const scene new THREE Scene const camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 const renderer new THREE WebGLRenderer renderer setSize window innerWidth window innerHeight document body appendChild renderer domElement const geometry new THREE BoxGeometry const material new THREE MeshBasicMaterial color 0x00ff00 const cube new THREE Mesh geometry material scene add cube camera position z 5 const animate function requestAnimationFrame animate cube rotation x 0 01 cube rotation y 0 01 renderer render scene camera console log starting animation loop animate var script document createElement script script type text javascript script src https cdnjs cloudflare com ajax libs three js r128 three min js document head appendChild script var script2 document createElement script script2 type text javascript script2 src https threejs org examples js loaders OBJLoader js document head appendChild script2 document body style height 300pt script2 onload function const scene new THREE Scene const camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 const renderer new THREE WebGLRenderer renderer setSize window innerWidth window innerHeight document body appendChild renderer domElement const geometry new THREE BoxGeometry const material new THREE MeshBasicMaterial color 0x00ff00 wireframe true const cube new THREE Mesh geometry material scene add cube camera position z 5 let objmodel https raw githubusercontent com dwqdaiwenqi react 3d viewer master site src lib model freedom obj var loader new THREE OBJLoader console log OBJLoader loader let model null loader load objmodel object console log loaded model root object traverse function child if child instanceof THREE Mesh child material material let s 0 01 object children 0 scale set s s s scene add object const animate function requestAnimationFrame animate cube rotation x 0 01 cube rotation y 0 01 renderer render scene camera console log starting animation loop animate document body style height 300pt var script document createElement script script type text javascript script src https cdnjs cloudflare com ajax libs three js r128 three min js document head appendChild script small count variable to check all resources all loaded and ready let count 0 script onload function var script2 document createElement script script2 type text javascript script2 src https threejs org examples js loaders OBJLoader js document head appendChild script2 count loaded script2 onload function count loaded window onload function count loaded script onload function count loaded function loaded console log loaded count count if count 3 return const renderer new THREE WebGLRenderer var camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 camera position set 0 100 200 const scene new THREE Scene scene background new THREE Color blue renderer setSize window innerWidth window innerHeight document body appendChild renderer domElement const planeSize 200 const loader new THREE TextureLoader const texture loader load https upload wikimedia org wikipedia commons b bf Test_card png texture wrapS THREE RepeatWrapping texture wrapT THREE RepeatWrapping texture magFilter THREE NearestFilter const repeats planeSize 40 texture repeat set repeats repeats const planeGeo new THREE PlaneGeometry planeSize planeSize const planeMat new THREE MeshPhongMaterial map texture side THREE DoubleSide const mesh new THREE Mesh planeGeo planeMat mesh rotation x Math PI 0 5 scene add mesh const skyColor 0xb1e1ff light blue const groundColor 0xb97a20 brownish orange const intensity 1 const light new THREE HemisphereLight skyColor groundColor intensity const color 0xffffff const intensity 1 const light new THREE DirectionalLight color intensity light position set 0 100 100 light target position set 5 0 0 scene add light scene add light target let objmodel https raw githubusercontent com dwqdaiwenqi react 3d viewer master site src lib model freedom obj var loader new THREE OBJLoader loader load objmodel root scene add root root rotation y 1 console log model loaded function resizeRendererToDisplaySize renderer const canvas renderer domElement const width canvas clientWidth const height canvas clientHeight const needResize canvas width width canvas height height if needResize renderer setSize width height false return needResize function render if resizeRendererToDisplaySize renderer const canvas renderer domElement camera aspect canvas clientWidth canvas clientHeight camera updateProjectionMatrix renderer render scene camera scene rotation y 0 01 requestAnimationFrame render render console log done
tion var script2 document createElement script script2 type text javascript script2 src https threejs org examples js loaders OBJLoader js document head appendChild script2 count loaded script2 onload function count loaded window onload function count loaded script onload function count loaded function loaded console log loaded count count if count 3 return const renderer new THREE WebGLRenderer var camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 camera position set 0 100 200 const scene new THREE Scene scene background new THREE Color blue renderer setSize window innerWidth window innerHeight document body appendChild renderer domElement const planeSize 200 const loader new THREE TextureLoader const texture loader load https upload wikimedia org wikipedia commons b bf Test_card png texture wrapS THREE RepeatWrapping texture wrapT THREE RepeatWrapping texture magFilter THREE NearestFilter const repeats planeSize 40 texture repeat set repeats repeats const planeGeo new THREE PlaneGeometry planeSize planeSize const planeMat new THREE MeshPhongMaterial map texture side THREE DoubleSide const mesh new THREE Mesh planeGeo planeMat mesh rotation x Math PI 0 5 scene add mesh const skyColor 0xb1e1ff light blue const groundColor 0xb97a20 brownish orange const intensity 1 const light new THREE HemisphereLight skyColor groundColor intensity const color 0xffffff const intensity 1 const light new THREE DirectionalLight color intensity light position set 0 100 100 light target position set 5 0 0 scene add light scene add light target let objmodel https raw githubusercontent com dwqdaiwenqi react 3d viewer master site src lib model freedom obj var loader new THREE OBJLoader loader load objmodel root scene add root root rotation y 1 console log model loaded function resizeRendererToDisplaySize renderer const canvas renderer domElement const width canvas clientWidth const height canvas clientHeight const needResize canvas width width canvas height height if needResize renderer setSize width height false return needResize function render if resizeRendererToDisplaySize renderer const canvas renderer domElement camera aspect canvas clientWidth canvas clientHeight camera updateProjectionMatrix renderer render scene camera scene rotation y 0 01 requestAnimationFrame render render console log done