Hello guys!! Im tryng to import the function math.sin, math.cos and math.unit in my script. But, the canvas doesnt work.
The function:
https://mathjs.org/docs/reference/functions/sin.html
Result:
The script:
<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">
<script src="math.js" type="text/javascript"></script>
<style>
#canvas {
vertical-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</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 src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.2/math.js"> </script>
<h3>CONFERINDO SE FUNCIONA EM UMA PÁGINA WEB</h3>
<!--O canvas deve ficar antes do script. Para pegar-->
<canvas id="canvas"></canvas>
<script type="text/javascript">
import {cos, sin, unit} from "https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.2/math.js";
//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
let 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);
//===============================================================SILO================================================================//
//==========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( -30, -30, -30 );
scene.add( spotLight );
pointLight = new THREE.PointLight( 0xff0000, 5, 100 );
pointLight.position.set( -0.25, -0.5, -0.25 );
scene.add( pointLight );*/
//==============DISTRIBUIÇÃO DOS CABOS=================//
var graus;
let posicaoCabosX = new Array(); //Array que guarda as posições X
let posicaoCabosZ = new Array(); //Array que guarda as posições Z
let conversaoGraus_RadianoItem;
let itemX = mathCos(conversaoGraus_RadianoItem); //Pega o cosseno dos graus e armazena no itemX
let itemZ
function DistribuirCabosNoSilo()
{
graus = 360 / (quantidadeCabos - 1);
//FOR RESPONSÁVEL POR ARMAZENAR AS POSIÇÕES X,Y DE CADA CABO
for (let k = 0; k <= (quantidadeCabos - 1); k++) {
conversaoGraus_RadianoItem = graus * k; //Primeiro multiplica os graus pelo item.
conversaoGraus_RadianoItem = math.unit(conversaoGraus_RadianoItem, 'deg'); // Depois converte de graus para radiano.
//Cálculo para descobrir o
itemX = math.cos(conversaoGraus_RadianoItem); //Pega o cosseno dos graus e armazena no itemX Z!!Z!!!!!!!!!!!!!
itemZ = math.sin(conversaoGraus_RadianoItem); //Pega o seno dos graus e armazena no itemZ !!!!!!
itemX = itemX * 0.2; //Multiplica o itemX pelo raio. Dando assim, a posição certa para o cabo ficar.
itemZ = itemZ * 0.2; //Multiplica o itemZ pelo raio. Dando assim, a posição certa para o cabo ficar.
posicaoCabosX[k] = itemX; //Armazena itemX na array posicaoCabosX
posicaoCabosZ[k] = itemZ; //Armazena itemZ na array posicaoCabosZ
}
//===============================COLOCA OS CABOS NO SILO=====================
//COLOCA O CABO NO MEIO
let caboMeioGeometria;
let caboMeioMaterial;
let caboMeioMesh;
caboMeioGeometria = new THREE.SphereGeometry( 0.0550, 6, 6 );
caboMeioMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
caboMeioMesh = new THREE.Mesh( caboMeioGeometria, caboMeioMaterial );
caboMeioMesh.position.set(0,0.2,0);
scene.add( caboMeioMesh );
//COLOCA OS CABOS NAS LATERAIS
let cabosLateraisGeometria = new Array();
let cabosLateraisMaterial = new Array();
let cabosLateraisMesh = new Array();
//FOR RESPONSÁVEL POR DISTRIBUIR AS COLUNAS LATERAIS
for(let n=0;n<=(quantidadeCabos - 1); n++){
cabosLateraisGeometria[n] = new THREE.SphereGeometry( 0.0550, 6, 6 );
cabosLateraisMaterial[n] = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
cabosLateraisMesh[n] = new THREE.Mesh(cabosLateraisGeometria[n], cabosLateraisMaterial[n]);
cabosLateraisMesh[n].position.set(posicaoCabosX[n], 0.2, posicaoCabosZ[n]);
//Vou ter que criar alguma variável que altere a rotação de cada um dos cabos de acordo com a posição
scene.add(cabosLateraisMesh[n]);
}
/* exemplo
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]);*/
}
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==========//
artifactCanvas = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(600, 300);
//==========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>