Interactive 3D Graphics-Lesson4 Problem Set

最新推荐文章于 2023-09-02 15:28:54 发布
最新推荐文章于 2023-09-02 15:28:54 发布
阅读量1.9k 收藏
点赞数
分类专栏： 计算机图形学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silangquan/article/details/8893865
版权

第四课讲的是变换，还有坐标系之类的，不是很深。

第四课的Problem set记录。

1.机器人手臂

要求是添加机器人手臂的底座，只要理解好THREE.Object3D()就可以了。参考一下原有的代码就可以得到结果。


/*global THREE, Coordinates, $, document, window, dat*/

var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;
var arm, forearm, body;

function fillScene() {
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

	// LIGHTS
	var ambientLight = new THREE.AmbientLight( 0x222222 );
	var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
	light.position.set( 200, 400, 500 );
	var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 );
	light2.position.set( -500, 250, -200 );
	scene.add(ambientLight);
	scene.add(light);
	scene.add(light2);

    // Robot definitions
	var robotBaseMaterial = new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } );
	var robotForearmMaterial = new THREE.MeshPhongMaterial( { color: 0xF4C154, specular: 0xF4C154, shininess: 100 } );
	var robotUpperArmMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x95E4FB, shininess: 100 } );
	var robotBodyMaterial = new THREE.MeshPhongMaterial( { color: 0x279933, specular: 0x279933, shininess: 100 } );

	var torus = new THREE.Mesh( 
		new THREE.TorusGeometry( 22, 15, 32, 32 ), robotBaseMaterial );
	torus.rotation.x = 90 * Math.PI/180;
	scene.add( torus );

	forearm = new THREE.Object3D();
	var faLength = 80;

	createRobotExtender( forearm, faLength, robotForearmMaterial );

	arm = new THREE.Object3D();
	var uaLength = 120;	
	
	createRobotCrane( arm, uaLength, robotUpperArmMaterial );
	
	// Move the forearm itself to the end of the upper arm.
	forearm.position.y = uaLength;	
	arm.add( forearm );
	//scene.add( arm );

    // YOUR CODE HERE
  	body = new THREE.Object3D();
	var bodyLength = 60;
        arm.position.y = bodyLength;
        body.add( arm );
        createRobotBody( body, bodyLength, robotBodyMaterial );
        scene.add( body );
}

function createRobotExtender( part, length, material )
{
	var cylinder = new THREE.Mesh( 
		new THREE.CylinderGeometry( 22, 22, 6, 32 ), material );
	part.add( cylinder );

	var i;
	for ( i = 0; i < 4; i++ )
	{
		var box = new THREE.Mesh( 
			new THREE.CubeGeometry( 4, length, 4 ), material );
		box.position.x = (i < 2) ? -8 : 8;
		box.position.y = length/2;
		box.position.z = (i%2) ? -8 : 8;
		part.add( box );
	}
	
	cylinder = new THREE.Mesh( 
		new THREE.CylinderGeometry( 15, 15, 40, 32 ), material );
	cylinder.rotation.x = 90 * Math.PI/180;
	cylinder.position.y = length;
	part.add( cylinder );
}

function createRobotCrane( part, length, material )
{
	var box = new THREE.Mesh( 
		new THREE.CubeGeometry( 18, length, 18 ), material );
	box.position.y = length/2;
	part.add( box );
	
	var sphere = new THREE.Mesh( 
		new THREE.SphereGeometry( 20, 32, 16 ), material );
	// place sphere at end of arm
	sphere.position.y = length;
	part.add( sphere );
}

function createRobotBody( part, length, material )
{
	var cylinder = new THREE.Mesh( 
		new THREE.CylinderGeometry( 50, 12, length/2, 18 ), material );
	cylinder.position.y = length/4;
	part.add( cylinder );
	
	cylinder = new THREE.Mesh( 
		new THREE.CylinderGeometry( 12, 50, length/2, 18 ), material );
	cylinder.position.y = 3*length/4;
	part.add( cylinder );
	
	var box = new THREE.Mesh( 
		new THREE.CubeGeometry( 12, length/4, 110 ), material );
	box.position.y = length/2;
	part.add( box );

	var sphere = new THREE.Mesh( 
		new THREE.SphereGeometry( 20, 32, 16 ), material );
	// place sphere at end of arm
	sphere.position.y = length;
	part.add( sphere );
}

function init() {
	var canvasWidth = 846;
	var canvasHeight = 494;
	var canvasRatio = canvasWidth / canvasHeight;

	// RENDERER
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setSize(canvasWidth, canvasHeight);
	renderer.setClearColorHex( 0xAAAAAA, 1.0 );

	// CAMERA
	camera = new THREE.PerspectiveCamera( 38, canvasRatio, 1, 10000 );
	camera.position.set( -510, 240, 100 );
	// CONTROLS
	cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
	cameraControls.target.set(0,120,0);
	camera.position.set(-102, 177, 20);
	cameraControls.target.set(-13, 60, 2);
	fillScene();

}

function addToDOM() {
    var container = document.getElementById('container');
    var canvas = container.getElementsByTagName('canvas');
    if (canvas.length>0) {
        container.removeChild(canvas[0]);
    }
    container.appendChild( renderer.domElement );
}

function drawHelpers() {
    if (ground) {
		Coordinates.drawGround({size:10000});		
	}
	if (gridX) {
		Coordinates.drawGrid({size:10000,scale:0.01});
	}
	if (gridY) {
		Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
	}
	if (gridZ) {
		Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});	
	}
	if (axes) {
		Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
	}
}

function animate() {
	window.requestAnimationFrame(animate);
	render();
}

function render() {
	var delta = clock.getDelta();
	cameraControls.update(delta);

	if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
	{
		gridX = effectController.newGridX;
		gridY = effectController.newGridY;
		gridZ = effectController.newGridZ;
		ground = effectController.newGround;
		axes = effectController.newAxes;

		fillScene();
	}
  
    // UNCOMMENT FOLLOWING LINES TO ENABLE CONTROLS FOR BODY:
  
	// body.rotation.y = effectController.by * Math.PI/180;	// yaw

	arm.rotation.y = effectController.uy * Math.PI/180;	// yaw
	arm.rotation.z = effectController.uz * Math.PI/180;	// roll
	
	forearm.rotation.y = effectController.fy * Math.PI/180;	// yaw
	forearm.rotation.z = effectController.fz * Math.PI/180;	// roll
	
	renderer.render(scene, camera);
}

function setupGui() {

	effectController = {

		newGridX: gridX,
		newGridY: gridY,
		newGridZ: gridZ,
		newGround: ground,
		newAxes: axes,
		
        // UNCOMMENT FOLLOWING LINE TO SET DEFAULT VALUE OF CONTROLS FOR BODY:
		// by: 0.0,
		
		uy: 70.0,
		uz: -15.0,

		fy: 10.0,
		fz: 60.0
	};

	var gui = new dat.GUI();
	var h = gui.addFolder("Grid display");
	h.add( effectController, "newGridX").name("Show XZ grid");
	h.add( effectController, "newGridY" ).name("Show YZ grid");
	h.add( effectController, "newGridZ" ).name("Show XY grid");
	h.add( effectController, "newGround" ).name("Show ground");
	h.add( effectController, "newAxes" ).name("Show axes");
	h = gui.addFolder("Arm angles");
	// student, uncomment: h.add(effectController, "by", -180.0, 180.0, 0.025).name("Body y");
	h.add(effectController, "uy", -180.0, 180.0, 0.025).name("Upper arm y");
	h.add(effectController, "uz", -45.0, 45.0, 0.025).name("Upper arm z");
	h.add(effectController, "fy", -180.0, 180.0, 0.025).name("Forearm y");
	h.add(effectController, "fz", -120.0, 120.0, 0.025).name("Forearm z");
}

init();
fillScene();
drawHelpers();
addToDOM();
setupGui();
animate();



2.添加机器人手指

首先参照leftHand的创建方式创建rightHand，然后在render()方法中添加对手指的控制。


/*global THREE, Coordinates, $, document, window, dat*/

var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;
var arm, forearm, body, handLeft, handRight;

function fillScene() {
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

	// LIGHTS
	var ambientLight = new THREE.AmbientLight( 0x222222 );
	var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
	light.position.set( 200, 400, 500 );
	var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 );
	light2.position.set( -500, 250, -200 );
	scene.add(ambientLight);
	scene.add(light);
	scene.add(light2);

    // Robot definitions
	var robotHandLeftMaterial = new THREE.MeshPhongMaterial( { color: 0xCC3399, specular: 0xCC3399, shininess: 20 } );
	var robotHandRightMaterial = new THREE.MeshPhongMaterial( { color: 0xDD3388, specular: 0xDD3388, shininess: 20 } );
	var robotBaseMaterial = new THREE.MeshPhongMaterial( { color: 0x6E23BB, specular: 0x6E23BB, shininess: 20 } );
	var robotForearmMaterial = new THREE.MeshPhongMaterial( { color: 0xF4C154, specular: 0xF4C154, shininess: 100 } );
	var robotUpperArmMaterial = new THREE.MeshPhongMaterial( { color: 0x95E4FB, specular: 0x95E4FB, shininess: 100 } );

	var torus = new THREE.Mesh( 
		new THREE.TorusGeometry( 22, 15, 32, 32 ), robotBaseMaterial );
	torus.rotation.x = 90 * Math.PI/180;
	scene.add( torus );
	
	forearm = new THREE.Object3D();
	var faLength = 80;

	createRobotExtender( forearm, faLength, robotForearmMaterial );

	arm = new THREE.Object3D();
	var uaLength = 120;	
	
	createRobotCrane( arm, uaLength, robotUpperArmMaterial );
	
	// Move the forearm itself to the end of the upper arm.
	forearm.position.y = uaLength;	
	arm.add( forearm );
	
	scene.add( arm );

	var handLength = 38;

	handLeft = new THREE.Object3D();
	createRobotGrabber( handLeft, handLength, robotHandLeftMaterial );
	// Move the hand part to the end of the forearm.
	handLeft.position.y = faLength;		
	forearm.add( handLeft );
  
    // YOUR CODE HERE
	// Add the second grabber handRight. Note that it uses a different color, defined above
     handRight= new THREE.Object3D();
	createRobotGrabber( handRight, handLength, robotHandRightMaterial );
	// Move the hand part to the end of the forearm.
	handRight.position.y = faLength;		
	forearm.add( handRight );
    // ALSO EDIT render() TO ENABLE CONTROLS FOR GRABBER

}

function createRobotGrabber( part, length, material )
{
	var box = new THREE.Mesh( 
		new THREE.CubeGeometry( 30, length, 4 ), material );
	box.position.y = length/2;
	part.add( box );
}

function createRobotExtender( part, length, material )
{
	var cylinder = new THREE.Mesh( 
		new THREE.CylinderGeometry( 22, 22, 6, 32 ), material );
	part.add( cylinder );

	var i;
	for ( i = 0; i < 4; i++ )
	{
		var box = new THREE.Mesh( 
			new THREE.CubeGeometry( 4, length, 4 ), material );
		box.position.x = (i < 2) ? -8 : 8;
		box.position.y = length/2;
		box.position.z = (i%2) ? -8 : 8;
		part.add( box );
	}
	
	cylinder = new THREE.Mesh( 
		new THREE.CylinderGeometry( 15, 15, 40, 32 ), material );
	cylinder.rotation.x = 90 * Math.PI/180;
	cylinder.position.y = length;
	part.add( cylinder );
}

function createRobotCrane( part, length, material )
{
	var box = new THREE.Mesh( 
		new THREE.CubeGeometry( 18, length, 18 ), material );
	box.position.y = length/2;
	part.add( box );
	
	var sphere = new THREE.Mesh( 
		new THREE.SphereGeometry( 20, 32, 16 ), material );
	// place sphere at end of arm
	sphere.position.y = length;
	part.add( sphere );
}

function init() {
	var canvasWidth = 846;
	var canvasHeight = 494;
	var canvasRatio = canvasWidth / canvasHeight;

	// RENDERER
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setSize(canvasWidth, canvasHeight);
	renderer.setClearColorHex( 0xAAAAAA, 1.0 );

	// CAMERA
	camera = new THREE.PerspectiveCamera( 38, canvasRatio, 1, 10000 );
	// CONTROLS
	cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
	camera.position.set(-49, 242,54);
	cameraControls.target.set(54, 106, 33);
	fillScene();

}

function addToDOM() {
    var container = document.getElementById('container');
    var canvas = container.getElementsByTagName('canvas');
    if (canvas.length>0) {
        container.removeChild(canvas[0]);
    }
    container.appendChild( renderer.domElement );
}

function drawHelpers() {
    if (ground) {
		Coordinates.drawGround({size:10000});		
	}
	if (gridX) {
		Coordinates.drawGrid({size:10000,scale:0.01});
	}
	if (gridY) {
		Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
	}
	if (gridZ) {
		Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});	
	}
	if (axes) {
		Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
	}
}

function animate() {
	window.requestAnimationFrame(animate);
	render();
}

function render() {
	var delta = clock.getDelta();
	cameraControls.update(delta);

	if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
	{
		gridX = effectController.newGridX;
		gridY = effectController.newGridY;
		gridZ = effectController.newGridZ;
		ground = effectController.newGround;
		axes = effectController.newAxes;

		fillScene();
	}
  
	arm.rotation.y = effectController.uy * Math.PI/180;	// yaw
	arm.rotation.z = effectController.uz * Math.PI/180;	// roll
	
	forearm.rotation.y = effectController.fy * Math.PI/180;	// yaw
	forearm.rotation.z = effectController.fz * Math.PI/180;	// roll
	
    // ADD handRight yaw AND translate HERE
    handLeft.rotation.z = effectController.hz * Math.PI/180;	// yaw
	handLeft.position.z = effectController.htz;	// translate
    
    handRight.rotation.z = effectController.hz * Math.PI/180;
    handRight.position.z = -effectController.htz;
	renderer.render(scene, camera);
}

function setupGui() {

	effectController = {

		newGridX: gridX,
		newGridY: gridY,
		newGridZ: gridZ,
		newGround: ground,
		newAxes: axes,
		
		uy: 70.0,
		uz: -15.0,

		fy: 10.0,
		fz: 60.0,
        
        hz: 30.0,
		htz: 12.0
	};

	var gui = new dat.GUI();
	var h = gui.addFolder("Grid display");
	h.add( effectController, "newGridX").name("Show XZ grid");
	h.add( effectController, "newGridY" ).name("Show YZ grid");
	h.add( effectController, "newGridZ" ).name("Show XY grid");
	h.add( effectController, "newGround" ).name("Show ground");
	h.add( effectController, "newAxes" ).name("Show axes");
	h = gui.addFolder("Arm angles");
	h.add(effectController, "uy", -180.0, 180.0, 0.025).name("Upper arm y");
	h.add(effectController, "uz", -45.0, 45.0, 0.025).name("Upper arm z");
	h.add(effectController, "fy", -180.0, 180.0, 0.025).name("Forearm y");
	h.add(effectController, "fz", -120.0, 120.0, 0.025).name("Forearm z");
    h.add(effectController, "hz", -45.0, 45.0, 0.025).name("Hand z");
	h.add(effectController, "htz", 2.0, 17.0, 0.025).name("Hand spread");
}

init();
fillScene();
drawHelpers();
addToDOM();
setupGui();
animate();



3.画一朵花

这里给出了花的柄，要求画出24朵花瓣。

花瓣的绘制方法已经给出，通过循环变换就可以绘制出来，注意变换的顺序。


// Make a Flower

/*global THREE, Coordinates, document, window, dat*/

var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = true;
var gridY = false;
var gridZ = false;
var axes = true;
var ground = true;


function fillScene() {
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

	// LIGHTS
	var ambientLight = new THREE.AmbientLight( 0x222222 );
	var light = new THREE.DirectionalLight( 0xffffff, 1.0 );
	light.position.set( 200, 400, 500 );
	var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 );
	light2.position.set( -500, 250, -200 );
	scene.add(ambientLight);
	scene.add(light);
	scene.add(light2);

    // FLOWER
    var petalMaterial = new THREE.MeshLambertMaterial( { color: 0xCC5920 } );
	var flowerHeight = 200;
	var petalLength = 120;
	var cylGeom = new THREE.CylinderGeometry( 15, 0, petalLength, 32 );
	var flower = new THREE.Object3D();
    
    /
    // YOUR CODE HERE
	// add code here to make 24 petals, radiating around the sphere
    for (var i=0;i<24;i++)
    {
    	var cylinder = new THREE.Mesh( cylGeom, petalMaterial );
        
        cylinder.rotation.x = 90*Math.PI/180;
        cylinder.position.z = petalLength/2;
        var petal = new THREE.Object3D();
        petal.position.y = flowerHeight;
         petal.rotation.y = i*15*Math.PI/180;
        petal.add( cylinder );
        flower.add( petal );
    }

    
	var stamenMaterial = new THREE.MeshLambertMaterial( { color: 0x333310 } );
	var stamen = new THREE.Mesh( 
		new THREE.SphereGeometry( 20, 32, 16 ), stamenMaterial );
	stamen.position.y = flowerHeight;	// move to flower center
	flower.add( stamen );

	var stemMaterial = new THREE.MeshLambertMaterial( { color: 0x339424 } );
	var stem = new THREE.Mesh( 
		new THREE.CylinderGeometry( 10, 10, flowerHeight, 32 ), stemMaterial );
	stem.position.y = flowerHeight/2;	// move from ground to stamen
	flower.add( stem );

	scene.add( flower );

}


function init() {
	var canvasWidth = 846; 
	var canvasHeight = 494;
	var canvasRatio = canvasWidth / canvasHeight;

	// RENDERER
	renderer = new THREE.WebGLRenderer( { antialias: false } );
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setSize(canvasWidth, canvasHeight);
	renderer.setClearColorHex( 0xAAAAAA, 1.0 );

	// CAMERA
	camera = new THREE.PerspectiveCamera( 38, canvasRatio, 1, 10000 );
	// CONTROLS
	cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
	camera.position.set(-200, 400, 20);
	cameraControls.target.set(0,150,0);
	fillScene();

}

function addToDOM() {
    var container = document.getElementById('container');
    var canvas = container.getElementsByTagName('canvas');
    if (canvas.length>0) {
        container.removeChild(canvas[0]);
    }
    container.appendChild( renderer.domElement );
}

function drawHelpers() {
  if (ground) {
		Coordinates.drawGround({size:10000});		
	}
	if (gridX) {
		Coordinates.drawGrid({size:10000,scale:0.01});
	}
	if (gridY) {
		Coordinates.drawGrid({size:10000,scale:0.01, orientation:"y"});
	}
	if (gridZ) {
		Coordinates.drawGrid({size:10000,scale:0.01, orientation:"z"});	
	}
	if (axes) {
		Coordinates.drawAllAxes({axisLength:200,axisRadius:1,axisTess:50});
	}
}

function animate() {
	window.requestAnimationFrame(animate);
	render();
}

function render() {
	var delta = clock.getDelta();
	cameraControls.update(delta);

	if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
	{
		gridX = effectController.newGridX;
		gridY = effectController.newGridY;
		gridZ = effectController.newGridZ;
		ground = effectController.newGround;
		axes = effectController.newAxes;

		fillScene();
	}

	renderer.render(scene, camera);
}



function setupGui() {

	effectController = {

		newGridX: gridX,
		newGridY: gridY,
		newGridZ: gridZ,
		newGround: ground,
		newAxes: axes

	};

	var gui = new dat.GUI();
	var h = gui.addFolder("Grid display");
	h.add( effectController, "newGridX").name("Show XZ grid");
	h.add( effectController, "newGridY" ).name("Show YZ grid");
	h.add( effectController, "newGridZ" ).name("Show XY grid");
	h.add( effectController, "newGround" ).name("Show ground");
	h.add( effectController, "newAxes" ).name("Show axes");

}


// this is the main action sequence
init();
fillScene();
drawHelpers();
addToDOM();
setupGui();
animate();



4.压扁的花

在上一个程序上的改进，然它看起来更棒一些。
对花瓣继续进行处理，压扁，并且产生一些倾角。最终效果如下：


关键代码

    

 for (var i=0;i<24;i++)
    {
    	var cylinder = new THREE.Mesh( cylGeom, petalMaterial );
       // cylinder.position.y = petalHeight;
        cylinder.scale.z = 0.25;
        cylinder.rotation.x = 90*Math.PI/180;
        //cylinder.rotation.x = -20*Math.PI/180;
        cylinder.position.z = petalLength/2;
        var petal = new THREE.Object3D();
        
        petal.add( cylinder );
        petal.rotation.x = -20*Math.PI/180;
        var tmpObject = new THREE.Object3D();
        tmpObject.add( petal);
        tmpObject.rotation.y = i*15*Math.PI/180;
        tmpObject.position.y = flowerHeight;
         
        
        flower.add( tmpObject );
    }


拳四郎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Interactive 3D Graphics-Lesson3 Notes
weixin_33720956的博客
05-05 101
公开课的一些笔记。 三种着色方式 flat shading: 三角形的顶点没有法向量，三角形整个面才有法向量，打光时整个三角形只呈现一种颜色。 Gouraud shading: 三角形的顶点都有各自的法向量，打光时三个顶点有各自的颜色，接着做双线性内插 (bilinear interpolation)来求得颜色，使整个三角形有渐层的颜色变化。 Phong shadin...
Interactive 3D Graphics-Lesson2 Problem Set
爱冒险的技术宅
04-15 2752
Interactive 3D Graphics是Udacity上的一门图形学公开课（需要翻墙），最近在学习，在这里记录一下课程的学习进度和作业的答案。 多边形的三角形划分 由于在图形学中，面的表示通常是用三角形来表示，所以要显示多边形的时候，就要将其碎片化。 /////////////////////////////////////////////////////////////
白乔原创：图数据在线交互框架InteractiveGraph
白乔专栏
10-20 2306
InteractiveGraph 详细介绍     InteractiveGraph 是一个使用JavaScript开发的开源项目，为大规模图数据提供了一个基于Web的交互操作框架，其数据可以来自于本地的GSON文件。     InteractiveGraph提供了3个基本应用，分别是图导航器（GraphNavigator），图浏览器（GraphExplorer）以及关系查找器（RelFind...
ThreeJS – 如何提升three.js的渲染效果
奇点的博客
09-02 2636
对象的参数设置非常影响渲染效果要想获得比较好的渲染效果，对可进行以下参数设置。上述设置中，将antialias设置为true表示开启抗锯齿。表示将启用正确的物理灯光。表示使用2倍设备像素点采样，这有利于消除锯齿获得更加高质量的效果。设置这个属性主要是为了在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围（HDR）效果。这个属性如果要生效就是需要将hdr贴图作为场景的环境贴图，获取IBL的光照效果。使用hdr贴图作为场景的环境贴图也将大幅度提升场景或者模型的渲染效果。其中。
r-interactive-graphics-via-html:包裹
06-24
r-interactive-graphics-via-html ================================ 使用 RIGHT，您可以体验以下惊人的功能。 RIGHT 的目标是使多个图具有交互性。 它支持： 多个地块的交互性。 的语法， 使用响应式编程。 RIGHT ...
Interactive Computer Graphics A Top-Down Approach with WebGL(7th) 无水印pdf
10-05
Interactive Computer Graphics A Top-Down Approach with WebGL(7th) 英文无水印pdf 第7版 pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除...
Interactive Computer Graphics：A.Top-Down Approach with Shader-Based OpenGL
11-21
Interactive Computer Graphics：A.Top-Down Approach with Shader-Based OpenGL(6th.2011)
interactive-3d-button
03-20
互动式3D按钮
Magio - Interactive Effect Engine - URPHDRP.unitypackage
05-27
Magio - Interactive Effect Engine - URPHDRP.unitypackage
threejs 16 渲染器Renderers
—巨人绿
10-29 526
webgl渲染器 renderer = new THREE.WebGLRenderer(); renderer.physicallyCorrectLights = true; renderer.gammaInput = true;//默认为 false. 如果设置了该参数，表示所有纹理和颜色应当使用预乘的gamma值来输入。 renderer.gammaOutput = true;//默认为 false. 如果设置了该参数，表示所有纹理和颜色应当使用预乘的gamma值来输出。
ThreeJs中颜色渲染问题
WQH_Boss的博客
10-28 2878
关于ThreeJS 中颜色渲染问题，以及对于贴图、color的转换方法。
VisionPro与C# 图像显示十字光标
吴启林的博客
07-27 1646
VisonPro与C#联合编程，图像显示中心十字。
Threejs减少锯齿几种方法
左本Web3D
03-04 4523
Threejs减少锯齿几种方法。这些方法可以帮助您减少Three.js中的锯齿，并创建更平滑的3D图形。但请注意，使用高质量的抗锯齿和纹理会增加渲染成本，因此请确保您的计算机或设备能够处理这些技术。
按标签的坐标值对标签的二维码/条码排序
itleon的博客
10-16 831
按标签的坐标值对标签的二维码/条码排序 本博客主要还是为了学习Lambda 表达式运算符 =&amp;gt;，微软帮助参考地址为： [1]:https://docs.microsoft.com/zh-cn/previous-versions/visualstudio/visual-studio-2010/bb397687(v%3Dvs.100) =&amp;gt; 运算符（C# 参考） [2]:https://d...
three.js常见灯光及阴影的使用
xyphf的博客
05-19 1377
three.js常见灯光的使用 环境光(AmbientLight) 点光源(PointLight) 聚光灯(SpotLight) 平行光(DirectinalLight)
在threejs中添加两个场景和相机是需要注意render的参数设置
weixin_30482383的博客
05-18 2285
问题：我刚开始设置了两个场景和相机 但是第二个一直将第一个场景给覆盖了一直找不到原因 解决： 问题出在renderer.autoClear = false;上 设置render的参数如下： renderer = new THREE.WebGLRenderer({ antialias: true, precision: "highp", alpha: tru...
Three.js实战--修改OrbitControls的按键
北冥木鱼技术博客
08-22 6857
在Three场景中我们经常会用到OrbitControls的控制方式，如果这种按键排布不符合自己的想法时则需要修改OrbitControls.js的源码来达到自己想要的效果。
OrbitControls.1.js
个人博客
05-11 636
OrbitControls.1 /** * @author qiao / https://github.com/qiao * @author mrdoob / http://mrdoob.com * @author alteredq / http://alteredqualia.com/ * @author WestLangley / http://github.com/WestLangl...
interactive computer graphics a top-down approach with webgl, 7th edition by
最新发布
09-06
《交互式计算机图形学：基于WebGL的自顶向下方法，第7版》是一本介绍计算机图形学的教材。该书以WebGL为基础，以自顶向下的方式讲解交互式计算机图形学的相关概念和技术。 该书的第7版在之前版本的基础上进行了更新...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值