three.js通过鼠标绘制圆形

use CircleGeometry to draw a circle with raycaster

three, paint, circle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2241
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var normal = new THREE.Vector3(0, 0, 1);
var center = new THREE.Vector3();

var plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, center);

renderer.domElement.addEventListener('mousemove', onMouseMove, false);
renderer.domElement.addEventListener('mousedown', onMouseDown, false);

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var tempRadius = new THREE.Vector3();

var tempCircle = createCircle(1, "yellow");
tempCircle.scale.set(0.0001, 0.0001, 1);
scene.add(tempCircle);

function createCircle(radius, color) {
    let geom = new THREE.CircleGeometry(radius, 60);
    geom.vertices.shift(); //remove center point
    let mat = new THREE.LineBasicMaterial({
        color: color
    });
    return new THREE.LineLoop(geom, mat);
}

function onMouseMove(event) {
    let r = getRadius(event);
    tempCircle.scale.set(r, r, 1);
}

function onMouseDown(event) {
    let r = getRadius(event);
    let c = createCircle(r, Math.random() * 0x777777 + 0x777777);
    c.position.copy(center);
    scene.add(c);
}

function getRadius(event) {
    setRaycaster(event);
    raycaster.ray.intersectPlane(plane, tempRadius);
    return tempRadius.distanceTo(center);
}

function setRaycaster(event) {
    setMouse(event);
    raycaster.setFromCamera(mouse, camera);
}

function setMouse(event) {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

编译

CSS

HTML

use CircleGeometry to draw a circle with raycaster

three, paint, circle

编辑器支持Emmet

快捷键

use CircleGeometry to draw a circle with raycaster

three, paint, circle

three.js通过多点控制器来交互绘制多边形物体

three.js shader绘制黑白斜方格模式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：