使用的是three.js组件画线条;
每秒画一次,一直画下去;
要先装好three.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="node_modules/three/build/three.js"></script>
<script>
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);
const scene = new THREE.Scene();
var count = 1;
//create a white LineBasicMaterial
var paintWhiteLine = function () {
const material = new THREE.LineBasicMaterial({ color: 0xffffff });
const points = [];
points.push(new THREE.Vector3(- (10 +count), 0, 0));
points.push(new THREE.Vector3(0, (10 * count), 0));
points.push(new THREE.Vector3(10 +count, 0, 0));
count++;
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometry, material);
scene.add(line);
renderer.render(scene, camera);
}
paintWhiteLine();
//draw every second
var animate = function () {
setInterval(paintWhiteLine,1000);
}
animate(); // initial call {% endcomment %}
</script>
</body>
</html>
<<: [Python]使用Pillow,将图片由RGB转灰阶(Grayscale)
前言 主要籍由这个主题,熟悉永丰金融API的相关操作。 将系列文章 做一下规划 环境建置 API串接...
今天主要要来介绍这三个元件及彼此之间一个简单的应用,首先先来提一下EditText、textView...
今天我们要帮验证码小帮手加上取得 User Profile 的功能,这样能更进一步客制化讯息或纪录。...
网路,是我们生活圈不可缺少的一部分。 每天一早,不少人都会打开手机查看新的讯息、新闻或影片。 由此可...
今天要来安装这次会用到的所有工具套件,并能顺利将SASS编译成CSS~ VS Code 套件 我们这...