I cant put the threejs in a div/container;

Questions
1

I try other basic codes with div but doenst work. I want to make a canvas in which three.js decreases and is centered on the page.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

    <!--Inclusão de Scripts ThreeJs-->

    <script src="https://threejs.org/build/three.min.js"></script>

    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <!-- from js folder, not jsm -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

    <script>

        //DECLARE AS VARIÁVEIS AQUI! NÃO NAS FUNÇÕES! 

        //câmera, cena, renderizador

        var camera, scene, renderer;

        //Cilindro 

        var geometry, material, mesh;

        //Cone

        var geometry2, material2, mesh2;

        //Chão

        var materialChao, geometriaChao, chao;

        //Luz

        var luz;

        /*//Sol

        var spotLight;

        var spotLightHelper;

        var pointLight;

        var pointLightHelper;*/

        //Sensores circulares

        let calculo1;

        let calculo2;

        let calculo3;

        let resultado;

        let sensores = new Array();

        let adicionar;

        //Sensores quadrados

        var largura = 0.0625;

        var altura = 0.0625;

        var intensidade = 10;

        var rectLight;

        var rectLightHelper;

        //Sensores sem luz

        var geometria;

        var material3;

        var mesh3;

        let sensores_quadrados = new Array();

        let quadradosGeo = new Array();

        let quadradosMesh = new Array();

        //Calculos dos Cabos

        let Circunferencia;

        let valorReferencial;

        //OrbitControl

        var controls;

        //=======VALORES REFERENTES AO BANCO DE DADOS=====//

        //Atenção! Essas variáveis futuramente serão usadas para armazenar informações do banco de dados 

        var quantidadeCabos = 6.0;

        var quantidadeSensores = 8;

        var resultadoDistribuicao;

        //Posição dos cabos(para distribuir os cabos na circunferência do cilindro). Sempre vai haver um no meio.

        //Posição dos sensores(Distribuir na superfície do cilindro, tenho que usar altura do cilindro). 

        //Acho que vai precisar de uma função que, pra cada cabo, distribua os sensores.

        function distribuicaoCabos(quantidadeCabos, resultadoDistribuicao) {

            //Pega a circunferência do silo e divide pela quantidade de cabos - 1(por causa do cabo do meio).

            resultadoDistribuicao = 0.2 * 2 * 3.1415926535897932384626433832795; //Calcula a circunferência do cilindro

            resultadoDistribuicao = resultadoDistribuicao / (quantidadeCabos - 1); //Divide a circunferÇencia pela quantidade de cabos

            //return resultadoDistribuicao;

        }

        //Configuração inicial

        init();

        //Animação

        animate();

        function init() {

            //==========CÂMERA==========//

            camera = new THREE.PerspectiveCamera(50, 600 / 300, 0.01, 10);

            camera.position.z = 1;

            //==========CENA==========//

            scene = new THREE.Scene();

            scene.background = new THREE.Color(0x87ceeb);

            scene.fog = new THREE.FogExp2(0xcccccc, 0.002);

            //==========CILINDRO==========//

            geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 32);

            material = new THREE.MeshStandardMaterial({ color: 0xd3d3d3 });

            mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);

            //==========CONE==========//

            geometry2 = new THREE.ConeGeometry(0.2, 0.2, 32);

            material2 = new THREE.MeshStandardMaterial({ color: 0x808080 });

            mesh2 = new THREE.Mesh(geometry2, material2);

            scene.add(mesh2);

            mesh2.position.set(0, 0.35, 0); //Configura a posição do cone

            //=========LUZ-AMBIENTE=======//

            luz = new THREE.AmbientLight(0xffffff, 1); // soft white light

            scene.add(luz);

            /*//=========SOL======//

            spotLight = new THREE.SpotLight( 0xffff00 );

            spotLight.position.set( 20, 20, 20 );

            scene.add( spotLight );

            

            var pointLight = new THREE.PointLight( 0xff0000, 5, 100 );

            pointLight.position.set( 0.25, 0.5, 0.25 );

            scene.add( pointLight );*/

            /*

            //==============DISTRIBUIÇÃO DOS CABOS=================//

            //Pega a circunferência do silo e divide pela quantidade de cabos - 1(por causa do cabo do meio).

            Circunferencia = 0.2 * 2 * 3.1415926535897932384626433832795; //Calcula a circunferência do cilindro

            //Circunferencia dividido pela quantidade de cabos - 1(cabo do meio).

            valorReferencial = Circunferencia/(quantidadeCabos-1);

            

            for(let i=1; i<=quantidadeSensores; i++){

            calculo2 = 0.3 - (calculo1 * i);

            

            sensores[i] = new THREE.PointLight( 0xff0000, 10, 0.0305);

            sensores[i].position.set( 0.21, calculo2 ,0);

            scene.add( sensores[i] );

            

            //Preciso aprender a descobrir o (x,y) de acordo com o raio do silo. Falar com professor Renan.

            }*/

            //==============DISTRIBUIÇÃO DOS SENSORES==============//

            //Sensores circulares vermelho-MArelo

            calculo1 = 0.66 / (quantidadeSensores + 2.0); //Faz a distribuição dos sensores

            for (let i = 1; i <= quantidadeSensores; i++) {

                calculo2 = 0.3 - (calculo1 * i);

                sensores[i] = new THREE.PointLight(0xffff00, 100, 0.024);

                sensores[i].position.set(0.21, calculo2, 0);

                scene.add(sensores[i]);

                sensores[i] = new THREE.PointLight(0xff0000, 10, 0.026);

                sensores[i].position.set(0.21, calculo2, 0);

                scene.add(sensores[i]);

            }

            //Sensores circulares verde

            calculo1 = 0.65 / (quantidadeSensores + 2.0); //Faz a distribuição dos sensores

            for (let i = 1; i <= quantidadeSensores; i++) {

                calculo2 = (calculo1 * i);

                calculo3 = 0.3 - calculo2;

                sensores[i] = new THREE.PointLight(0x00ff00, 10, 0.0305);

                sensores[i].position.set(0, calculo3, -0.21);

                scene.add(sensores[i]);

            }

            //Coluna retângulo brilhoso MArelo

            rectLight = new THREE.RectAreaLight(0xffff00, 0.5, largura, altura);

            rectLight.position.set(0, 0.23, 0.22);

            rectLight.lookAt(0, 0, 0);

            scene.add(rectLight);

            //rectLightHelper = new THREE.RectAreaLightHelper( rectLight );

            //rectLight.add( rectLightHelper );

            //Sensor Quadrado sem luz Verde

            for (let j = 1; j <= quantidadeSensores; j++) {

                calculo2 = (calculo1 * j);

                calculo3 = 0.285 - calculo2;

                quadradosGeo[j] = new THREE.PlaneGeometry(0.0550, 0.0550, 4);

                quadradosMesh[j] = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });

                sensores_quadrados[j] = new THREE.Mesh(quadradosGeo[j], quadradosMesh[j]);

                sensores_quadrados[j].position.set(-0.2, calculo3, 0);

                sensores_quadrados[j].rotation.y = 3.1415926535897932384626433832795 / 2;

                scene.add(sensores_quadrados[j]);

            }

            //==========CHÃO========//

            materialChao = new THREE.MeshStandardMaterial({ color: 0x77dd77 });

            geometriaChao = new THREE.PlaneGeometry(100, 100, 8, 8);

            chao = new THREE.Mesh(geometriaChao, materialChao);

            chao.position.set(0, -0.25, 0);

            chao.rotation.x = - 3.1415926535897932384626433832795 / 2;

            scene.add(chao);

            //==========RENDERIZADOR==========//

            renderer = new THREE.WebGLRenderer({ canvas: artifactCanvas });

            /*renderer = new THREE.WebGLRenderer({

              antialias: true

            });*/

            renderer.setSize(600, 300);

            //document.body.appendChild(renderer.domElement);

            //==========ORBIT CONTROL==========//

            controls = new THREE.OrbitControls(camera, renderer.domElement);

            //Distância máxima e distância minima do zoom da câmera

            controls.minDistance = 0.5;

            controls.maxDistance = 1.25;

            //Limita o ângulo da câmera para não passar do chão.

            controls.maxPolarAngle = 3.1415926535897932384626433832795 / 2.0;

            camera.position.set(0, 0, 1);

        }

        function animate() {

            //==========ORBIT CONTROL==========//

            requestAnimationFrame(animate);

            controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

            render();

        }

        function render() {

            renderer.render(scene, camera); // Renderiza a câmera e a cena

        }

    </script>

    <canvas id="artifactCanvas">

    </canvas>

</body>

</html>
2

I think you have two problems: first, you write new THREE.WebGLRenderer({ canvas: artifactCanvas }); without ever declaring artifactCanvas. You’re obviously trying to refer to the <canvas id="artifactCanvas">' beow, but Javascript won't find it that way. Try adding a line above your new THREE.WebGLRenderercall withvar artifactCanvas = document.getElementById(‘artifactCanvas’). (To keep the concept of the element ID and the variable name separate, you could instead declare it var renderCanvasand pass it in asnew THREE.WebGLRenderer({ canvas: renderCanvas });`)

The second problem is you’re calling your <script> element element before the <canvas> element exists. Most scripts (and all inline scripts), are fetched and executed immediately, before the browser continues to parse the page. Try putting your big <script> element after the <canvas>.

1 Like
3

Sorry man. But continusly show a blank space in web. Sorry for my bad english.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/main.css">

</head>

<body>

    <!--Inclusão de Scripts ThreeJs-->

    <script src="https://threejs.org/build/three.min.js"></script>

    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <!-- from js folder, not jsm -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

    <canvas id="artifactCanvas"></canvas>

    <script>

        //DECLARE AS VARIÁVEIS AQUI! NÃO NAS FUNÇÕES! 

        //câmera, cena, renderizador

        var camera, scene, renderer;

        //Cilindro 

        var geometry, material, mesh;

        //Cone

        var geometry2, material2, mesh2;

        //Chão

        var materialChao, geometriaChao, chao;

        //Luz

        var luz;

        /*//Sol

        var spotLight;

        var spotLightHelper;

        var pointLight;

        var pointLightHelper;*/

        //Sensores circulares

        let calculo1;

        let calculo2;

        let calculo3;

        let resultado;

        let sensores = new Array();

        let adicionar;

        //Sensores quadrados

        var largura = 0.0625;

        var altura = 0.0625;

        var intensidade = 10;

        var rectLight;

        var rectLightHelper;

        //Sensores sem luz

        var geometria;

        var material3;

        var mesh3;

        let sensores_quadrados = new Array();

        let quadradosGeo = new Array();

        let quadradosMesh = new Array();

        //Calculos dos Cabos

        let Circunferencia;

        let valorReferencial;

        //OrbitControl

        var controls;

        //=======VALORES REFERENTES AO BANCO DE DADOS=====//

        //Atenção! Essas variáveis futuramente serão usadas para armazenar informações do banco de dados 

        var quantidadeCabos = 6.0;

        var quantidadeSensores = 8;

        var resultadoDistribuicao;

        //Canvas

        var artifactCanvas;

        var renderVar;

        //Posição dos cabos(para distribuir os cabos na circunferência do cilindro). Sempre vai haver um no meio.

        //Posição dos sensores(Distribuir na superfície do cilindro, tenho que usar altura do cilindro). 

        //Acho que vai precisar de uma função que, pra cada cabo, distribua os sensores.

        function distribuicaoCabos(quantidadeCabos, resultadoDistribuicao) {

            //Pega a circunferência do silo e divide pela quantidade de cabos - 1(por causa do cabo do meio).

            resultadoDistribuicao = 0.2 * 2 * 3.1415926535897932384626433832795; //Calcula a circunferência do cilindro

            resultadoDistribuicao = resultadoDistribuicao / (quantidadeCabos - 1); //Divide a circunferÇencia pela quantidade de cabos

            //return resultadoDistribuicao;

        }

        //Configuração inicial

        init();

        //Animação

        animate();

        function init() {

            //==========CÂMERA==========//

            camera = new THREE.PerspectiveCamera(50, 600 / 300, 0.01, 10);

            camera.position.z = 1;

            //==========CENA==========//

            scene = new THREE.Scene();

            scene.background = new THREE.Color(0x87ceeb);

            scene.fog = new THREE.FogExp2(0xcccccc, 0.002);

            //==========CILINDRO==========//

            geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 32);

            material = new THREE.MeshStandardMaterial({ color: 0xd3d3d3 });

            mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);

            //==========CONE==========//

            geometry2 = new THREE.ConeGeometry(0.2, 0.2, 32);

            material2 = new THREE.MeshStandardMaterial({ color: 0x808080 });

            mesh2 = new THREE.Mesh(geometry2, material2);

            scene.add(mesh2);

            mesh2.position.set(0, 0.35, 0); //Configura a posição do cone

            //=========LUZ-AMBIENTE=======//

            luz = new THREE.AmbientLight(0xffffff, 1); // soft white light

            scene.add(luz);

            /*//=========SOL======//

            spotLight = new THREE.SpotLight( 0xffff00 );

            spotLight.position.set( 20, 20, 20 );

            scene.add( spotLight );

            

            var pointLight = new THREE.PointLight( 0xff0000, 5, 100 );

            pointLight.position.set( 0.25, 0.5, 0.25 );

            scene.add( pointLight );*/

            /*

            //==============DISTRIBUIÇÃO DOS CABOS=================//

            //Pega a circunferência do silo e divide pela quantidade de cabos - 1(por causa do cabo do meio).

            Circunferencia = 0.2 * 2 * 3.1415926535897932384626433832795; //Calcula a circunferência do cilindro

            //Circunferencia dividido pela quantidade de cabos - 1(cabo do meio).

            valorReferencial = Circunferencia/(quantidadeCabos-1);

            

            for(let i=1; i<=quantidadeSensores; i++){

            calculo2 = 0.3 - (calculo1 * i);

            

            sensores[i] = new THREE.PointLight( 0xff0000, 10, 0.0305);

            sensores[i].position.set( 0.21, calculo2 ,0);

            scene.add( sensores[i] );

            

            //Preciso aprender a descobrir o (x,y) de acordo com o raio do silo. Falar com professor Renan.

            }*/

            //==============DISTRIBUIÇÃO DOS SENSORES==============//

            //Sensores circulares vermelho-MArelo

            calculo1 = 0.66 / (quantidadeSensores + 2.0); //Faz a distribuição dos sensores

            for (let i = 1; i <= quantidadeSensores; i++) {

                calculo2 = 0.3 - (calculo1 * i);

                sensores[i] = new THREE.PointLight(0xffff00, 100, 0.024);

                sensores[i].position.set(0.21, calculo2, 0);

                scene.add(sensores[i]);

                sensores[i] = new THREE.PointLight(0xff0000, 10, 0.026);

                sensores[i].position.set(0.21, calculo2, 0);

                scene.add(sensores[i]);

            }

            //Sensores circulares verde

            calculo1 = 0.65 / (quantidadeSensores + 2.0); //Faz a distribuição dos sensores

            for (let i = 1; i <= quantidadeSensores; i++) {

                calculo2 = (calculo1 * i);

                calculo3 = 0.3 - calculo2;

                sensores[i] = new THREE.PointLight(0x00ff00, 10, 0.0305);

                sensores[i].position.set(0, calculo3, -0.21);

                scene.add(sensores[i]);

            }

            //Coluna retângulo brilhoso MArelo

            rectLight = new THREE.RectAreaLight(0xffff00, 0.5, largura, altura);

            rectLight.position.set(0, 0.23, 0.22);

            rectLight.lookAt(0, 0, 0);

            scene.add(rectLight);

            //rectLightHelper = new THREE.RectAreaLightHelper( rectLight );

            //rectLight.add( rectLightHelper );

            //Sensor Quadrado sem luz Verde

            for (let j = 1; j <= quantidadeSensores; j++) {

                calculo2 = (calculo1 * j);

                calculo3 = 0.285 - calculo2;

                quadradosGeo[j] = new THREE.PlaneGeometry(0.0550, 0.0550, 4);

                quadradosMesh[j] = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });

                sensores_quadrados[j] = new THREE.Mesh(quadradosGeo[j], quadradosMesh[j]);

                sensores_quadrados[j].position.set(-0.2, calculo3, 0);

                sensores_quadrados[j].rotation.y = 3.1415926535897932384626433832795 / 2;

                scene.add(sensores_quadrados[j]);

            }

            //==========CHÃO========//

            materialChao = new THREE.MeshStandardMaterial({ color: 0x77dd77 });

            geometriaChao = new THREE.PlaneGeometry(100, 100, 8, 8);

            chao = new THREE.Mesh(geometriaChao, materialChao);

            chao.position.set(0, -0.25, 0);

            chao.rotation.x = - 3.1415926535897932384626433832795 / 2;

            scene.add(chao);

            //==========RENDERIZADOR==========//

            renderVar = artificatCanvas;

            artifactCanvas = document.getElementById('artifactCanvas');

            renderer = new THREE.WebGLRenderer({ canvas: renderVar });

            /*renderer = new THREE.WebGLRenderer({

              antialias: true

            });*/

            renderer.setSize(600, 300);

            //document.body.appendChild(renderer.domElement);

            //==========ORBIT CONTROL==========//

            controls = new THREE.OrbitControls(camera, renderer.domElement);

            //Distância máxima e distância minima do zoom da câmera

            controls.minDistance = 0.5;

            controls.maxDistance = 1.25;

            //Limita o ângulo da câmera para não passar do chão.

            controls.maxPolarAngle = 3.1415926535897932384626433832795 / 2.0;

            camera.position.set(0, 0, 1);

        }

        function animate() {

            //==========ORBIT CONTROL==========//

            requestAnimationFrame(animate);

            controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true

            render();

        }

        function render() {

            renderer.render(scene, camera); // Renderiza a câmera e a cena

        }

    </script>

    

</body>

</html>
4

Oh; Sorry It works.
But how can I centralize this? With css code?
Like this?
vertical-align:center;

5

Oh. I did it. Simple put this in code and TADÁ!! The code was centralized.

<canvas id="artifactCanvas" style="vertical-align: center; margin-left: auto;margin-right: auto;"></canvas>

Thank you very much Jim!
I Love you man!